jquery点击只触发一次

通过查看其他post，我试图将live（）和on（）添加到我的代码中，但click函数只运行一次，然后就不再工作了。 有人可以指出我做错了什么。 这是我最新的代码：

 //Used to delete a step from the database after confirming with user $(document).ready(function(){ $("#success_message2").hide(); $(".delete_it").on('click',function() { var answer = confirm('Are you sure you want to delete this step?'); if (answer){ var data = { 'hospid': '', "step_id" : $(this).parent().attr("name") }; $.post("../php/progress_steps_delete.php", data, function (data) { if (data.success) { $("#success_message2").show('slow'); setTimeout(function () { $("#success_message2").hide('slow'); }, 5000); $('#step_list').html(data.success); } else { alert('not done'); $("#non-grid").prepend(data.error); } }, "json"); } }); });  

道歉，这是html

  
  
 
 
 
Progress Steps
 
 
 
New step added successfully!
 
New List Order Updated!
 
Step Deleted!
 
 
 
 
Add a Step
 
 Step Name  
 
 <input type="hidden" name="hosp" id="hosp" value=""/>  
 
 
 
 
 
List of Steps
 
Drag and Drop to Change Step Order
 <input type="hidden" name="hosp" id="hosp" value=""/> 
  
 
 
 
 
 
 
 
© Copyright 2012 Inc. | Top
 
 
  

好的，第二次编辑，我想我已经开始理解这里的问题了。 这是生成我的列表的PHP。 我点击的元素被埋在容器中。 我不希望单击整个容器，只需单击里面的图像。 那可能吗？ 感谢到目前为止的所有建议。 我在学….

 function getSteps($dbh, $hospid) { $sql1 = $dbh->prepare(' SELECT COUNT(*) FROM progress_steps WHERE hospital_id = :hospid '); $sql1->bindValue('hospid', $hospid); $sql1->execute(); $num_rows = $sql1->fetchcolumn(); $sql = $dbh->prepare(' SELECT * FROM progress_steps WHERE hospital_id = :hospid ORDER BY step_number '); $sql->bindValue('hospid', $hospid); $sql->execute(); if ($num_rows > 0) { $steps_table = ''; $isOdd = true; while (($row = $sql->fetch(PDO::FETCH_ASSOC)) !== false) { $steps_table .= "
 
    $row[step_name]
"; }; } else { $steps_table = ''; $steps_table .= "
You need to add steps.
"; }; return $steps_table; } 

Answer 1

我假设（ 通过您的代码 ） .delete_it项目在#step_list元素内。

因此，当您使用ajax结果替换其html时，您也会删除绑定的处理程序。

您需要将处理程序绑定到DOM层次结构中不会被删除的元素，例如#step_list本身。

所以改变绑定

 $(".delete_it").on('click',function() { 

至

 $("#step_list").on('click','.delete_it', function() { 

Answer 2

从这里很难看出来。 你介意分享HTML吗？ 不知道data.success包含什么也不容易。 .html（data.success）是否以任何方式影响删除按钮？

你确定你做了.live（）吗？

 $('.delete_it').live("click",function(){ }); 

如果您能提供更多信息，我可以提供帮助。

Answer 3

事件绑定到DOM节点。 如果删除了您绑定的DOM，则相关事件也可能会被删除。 您可以修复此问题，也可以利用DOM事件的“冒泡”特性。 例如，假设我的HTML是这样的：

我能做的是绑定到#container或者document来监听任何点击事件并检查事件的目标以查看我是否想要采取行动。 以上HTML的示例：

 $('#container').on('click', function (event) { var target = $(event.target); if (target.hasClass('delete_me')) { target.remove(); } });​ 

这与：

 $('#container').on('click', '.delete_me', function (event) { $(event.target).remove(); });​ 

或者我甚至可以在文档级别上收听：

 $(document).on('click', '.delete_me', function (event) { $(event.target).remove(); });​ 

这是一个工作示例： http ： //jsfiddle.net/Kcapv/

请注意，如果在子节点上使用event.stopPropagation()将阻止事件冒泡，因此如果您尝试此方法，则需要注意使用stopPropagation 。