Prevent default doesn't work when dom reload

Question

I have the following snippet

$( "#diner_option" ).click(function( event ) {
  event.preventDefault();
  console.log('ok')
}); 
        
 $( "#change" ).click(function( event ) {
    var add_html = "<div id='diner_div' class='col-md-3 mx-auto planning_recipe_card'><a href='recipes_details.php?recipeid=1'><div class='card card_recipes'><i id='diner_option' class='fas fa-cog recipe_option'></i><img class='img_recipe scard-img-top simg-fluid' src='https://fr.chatelaine.com/wp-content/uploads/0001/01/salade-tiede-courgettes-grillees-10797.jpg' alt='salade tiede de courgettes'><div class='card-body card_body_recipe'><h5 class='card-title'>salade tiede de courgettes</h5></div></div></div></a></div>"
    $("#diner_div").replaceWith(add_html)
    console.log('changed');
});

.recipe_option{
        position: absolute;
        padding: 15px;
        top: 0;
        right: 0;
        background: #353b43;
        border-bottom-left-radius: 10px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<button id="change">Change</button>


<div id="diner_div" class="col-md-3 mx-auto planning_recipe_card">
  <a href="recipes_details.php?recipeid=1">
    <div class="card card_recipes">
      <i id="diner_option" class="fas fa-cog recipe_option"></i>
      <img class="img_recipe scard-img-top simg-fluid" src="https://fr.chatelaine.com/wp-content/uploads/0001/01/salade-tiede-courgettes-grillees-10797.jpg" alt="salade tiede de courgettes">
      <div class="card-body card_body_recipe">
        <h5 class="card-title">salade tiede de courgettes</h5>
      </div>
    </div>
  </a>
</div>

When I click on cog icon, I get in the console the message ok which means it worked as intended. But when I click on the change button to refresh the dom and click on the cog, the event.preventDefault(); function doesn't work. The cog works like a link then.

I would like to be able to reload the dom and the cog icon still work (which means, shows the ok message)

score 1 · Accepted Answer · answered Jan 13 '21 at 18:16

You have to rebind your click event to the new element that replaces your old cog. Call your jquery bind again.

$( "#diner_option" ).click(function( event ) {
  event.preventDefault();
  console.log('ok')
}); 
        
 $( "#change" ).click(function( event ) {
    var add_html = "<div id='diner_div' class='col-md-3 mx-auto planning_recipe_card'><a href='recipes_details.php?recipeid=1'><div class='card card_recipes'><i id='diner_option' class='fas fa-cog recipe_option'></i><img class='img_recipe scard-img-top simg-fluid' src='https://fr.chatelaine.com/wp-content/uploads/0001/01/salade-tiede-courgettes-grillees-10797.jpg' alt='salade tiede de courgettes'><div class='card-body card_body_recipe'><h5 class='card-title'>salade tiede de courgettes</h5></div></div></div></a></div>"
    $("#diner_div").replaceWith(add_html);
    
    $( "#diner_option" ).click(function( event ) {
      event.preventDefault();
      console.log('ok')
    }); 
    console.log('changed');
});

.recipe_option{
        position: absolute;
        padding: 15px;
        top: 0;
        right: 0;
        background: #353b43;
        border-bottom-left-radius: 10px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<button id="change">Change</button>


<div id="diner_div" class="col-md-3 mx-auto planning_recipe_card">
  <a href="recipes_details.php?recipeid=1">
    <div class="card card_recipes">
      <i id="diner_option" class="fas fa-cog recipe_option"></i>
      <img class="img_recipe scard-img-top simg-fluid" src="https://fr.chatelaine.com/wp-content/uploads/0001/01/salade-tiede-courgettes-grillees-10797.jpg" alt="salade tiede de courgettes">
      <div class="card-body card_body_recipe">
        <h5 class="card-title">salade tiede de courgettes</h5>
      </div>
    </div>
  </a>
</div>

Prevent default doesn't work when dom reload

1 Answers1