Prevent default doesn't work when dom reload [duplicate] - html

Question

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
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)

Answer 1

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>