Question

我正在开发一个项目，其中我有一个元素表，如果单击一行我将详细信息加载到另一个div中，进行编辑并重新加载列表（如果删除某些内容或需要使用列表）。我通过$ .ajax调用这样做，但是在返回并更新html后，我的点击事件就停止了。

我正在使用$ .on将它们全部绑定到父元素，就像堆栈上的许多答案一样，并且所有内容都适用于第一次传递，但是所有链接在该传递后都会中断。它也打破了我的所有事件，甚至是我正在更新的div之外的事件。

我在这个项目中使用了jquery，Gumby和Code Igniter的组合。

这是我绑定所有内容的地方......

$(document).ready(function() { 
                $('#eventlisting').on("click",".eventrow",getEvent);
                $('#eventdetails').on("click","#eventupdate",updateEvent);
                $('#eventdetails').on("click","#eventdelete",deleteEvent);
                $('#eventdetails').on("click",'#eventsubmit',submitEvent);
            });

我的主要HTML ...请注意，内嵌onclick事件也会停止工作。

  <nav class="navbar">
        <div class="row">
            <ul class="eight columns">
                <li><h1 class="logo">Event Manager</h1></li>
                <li><div class="medium primary btn"  ><a class="neweventbttn" onclick="newEvent();">Enter New Event</a></div></li>
            </ul>
        </div>
    </nav>
<div class="container" id="maindiv">
   <section id="eventlisting" class="row"> //this is what gets re-set
    <table>
            <tr>
                    <th>Event Id</th>
                    <th>Division</th>
                    <th>Title</th>
                    <th>Date</th>
                </tr>
            <tr class="eventrow" name="eventlink"  value="62">
                <td>62</td>
            <td>type</td>
                    <td>A title of here</td>
                    <td>A date here</td>
             </tr>
            ...
            </table>
    <div id="eventdetails" class="five columns">
              //this holds my edit details section where updates are done
    </div>
</section>              
</div>

我的Ajax最初填充了详细信息区域......

function getEvent() {
   var eventid = $(this).attr('value');
   //do an ajax request here.
   var jqxhr = $.ajax({url:baseurl+"manager/eventget",
                         type:'POST',
                         data: {'eventid':eventid}
                      })
        .done(function() {
          $('#eventdetails').html(jqxhr.responseText);
        })
        .fail(function() {
             $('#eventdetails').append(jqxhr.responseText).append(jqxhr.statusText);
         })
         .complete(function() {
                $('#startdate').datepicker({dateFormat:"yy-mm-dd"});                                
                 Gumby.initialize('radiobtns');
          });
   }

我的一个Ajax调用，它们都很相似，所以如果一个人工作，他们都应该。

 function updateEvent() {
   //submit to the database, update event.
    var mydivision = $('input[checked]').val();
    var mydata = $('#editeventform').serialize();
    mydata = mydata.concat('&division=',mydivision);
    var jqxhr_update = $.ajax({url:baseurl+"manager/eventupdate",
                               type:'POST',
                               data: mydata
                            })
        .done(function() {
           if(jqxhr_update.responseText.indexOf('~')>0) {
              var mymessagedata = jqxhr_update.responseText.substr(0,jqxhr_update.responseText.indexOf('~'));
              var mylistdata = jqxhr_update.responseText.substr(jqxhr_update.responseText.indexOf('~')+1);
              $('#eventdetails').html(mymessagedata);
              $('#eventlisting').html(mylistdata);  //This is where I re-set the list
            } else {
              $('#eventdetails').html(jqxhr_update.responseText);
            }
          })
         .fail(function(){
             alert('failure'+jqxhr_update.responseText);
             $('#eventdetails').append(jqxhr_update.responseText).append(jqxhr_update.statusText);    
     });
  }

Answer 1

$('#eventlisting').html(mylistdata);  //This is where I re-set the list

然后，您可以从#eventlisting的后代中删除所有侦听器，包括#eventdetails。如果使用event delegation，则必须绑定到不变的父元素。所以将代码更改为

$(document).ready(function() { 
    $('#eventlisting')
      .on("click", ".eventrow", getEvent);
      .on("click", "#eventupdate", updateEvent);
      .on("click", "#eventdelete", deleteEvent);
      .on("click", '#eventsubmit', submitEvent);
});

Answer 2

你必须绑定一些不会被消灭的东西 - 你不是。覆盖eventlisting内容后，您eventdetails上的活动将被删除。您需要使用maindiv或其他一些父容器。

ajax调用后，事件委派会中断

2 个答案: