Question

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

<script language="javascript">
//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': '<? echo $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");
    }
});
});
</script>

道歉，这是html

<body>
<div id="body-wrapper">
  <?php include_once(getBasePath()."site_hospital_files/elements/navbar.php"); ?>
  <div id="main-content">
    <div class="content-box">
      <div class="content-box-header">
        <h3>Progress Steps</h3>
      </div>
      <div class="content-box-content">
        <div class="msg-status div_message" id="success_message">New step added successfully!</div>
        <div class="msg-status div_message" id="success_message1">New List Order Updated!</div>
        <div class="msg-status div_message" id="success_message2">Step Deleted!</div>
        <div id="non-grid">
          <form method="post" name="upload_form" id="upload_form">
            <fieldset style="height:100px;  margin-left:25px; margin-top:15px; background-color:#FFF;">
              <legend style="padding:2px;">Add a Step</legend>
              <div class="column-left" style="width:50%;">
                <label class="space">Step Name</label>
                <input class="text-input tall-input required alnum" type="text" id="step_add" name="step_add" style="width:90%;"/>
              </div>
              <div class="column-left" style="width:20%; padding-top:25px;">
                <input type="hidden" name="hosp" id="hosp" value="<? echo $hospid; ?>"/>
                <input type="submit" id="snd_upload" name="snd_upload" value="Submit Step" class='button'  />
              </div>
            </fieldset>
          </form>
          <form name="delete_form" method="post" id="delete_form">
            <fieldset style="height:100%;  margin-left:25px; margin-top:15px; background-color:#FFF;">
              <legend style="padding:2px;">List of Steps</legend>
              <h3>Drag and Drop to Change Step Order</h3>
              <input type="hidden" name="hosp" id="hosp" value="<? echo $hospid; ?>"/>
              <div id="step_list">
              <? echo $step_list ?>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div id="footer">&#169; Copyright 2012  Inc. | <a href="#">Top</a></div>
  </div>
</div>
</body>

好的，第二次编辑，我想我已经开始理解这里的问题了。这是生成我的列表的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 .= "<div class='hover_hand' name='$row[step_id]' id='item_$row[step_id]'><div style='float:left' class='delete_it'><img src='../images/delete_icon.gif'></div> <div style='float:left' class='middle_text'>&nbsp;&nbsp;&nbsp;&nbsp;$row[step_name]</div><input type='hidden' name='itemid[]' value='$row[step_id]'/></div>";
        };
     } else {
        $steps_table = '';
            $steps_table .= "<div>You need to add steps.</div>";
    };
    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是这样的：

<div id="container">
  <div class="item delete_me_on_click"></div>
  <div class="item delete_me_on_click"></div>
  <div class="item delete_me_on_click"></div>
</div>

我可以做的是绑定到#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。

jquery点击只触发一次

3 个答案: