6

通过查看其他帖子，我尝试将 live() 和 on() 添加到我的代码中，但点击功能只能工作一次，然后就不再工作了。有人可以指出我做错了什么。这是我的最新代码：

<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;
}
4

3 回答 3

19

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

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

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

所以改变绑定从

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

到

$("#step_list").on('click','.delete_it', function() {
于 2012-12-02T18:09:32.883 回答
3

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

你确定你做了 .live() 对吗？

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

});

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

于 2012-12-02T18:02:22.393 回答
2

事件绑定到 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的使用。

于 2012-12-02T18:04:58.853 回答