重新加载dom时防止默认设置不起作用

debugcn 发表于 Dev

可执行文件

我有以下片段

$( "#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>

当我单击齿轮图标时，我会在控制台中看到消息ok，这表明它已按预期工作。但是，当我单击更改按钮刷新dom并单击齿轮时，该event.preventDefault();功能不起作用。齿轮的工作就像一个链接。

我希望能够重新加载dom，并且齿轮图标仍然有效（这表示显示了ok消息）

大卫

您必须将click事件重新绑定到替换旧齿轮的新元素。再次调用您的jquery绑定。

$( "#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。