事件代表团Ajax调用后坏

我工作的一个项目，我有元素的表，如果行被点击我加载细节到另一个div进行编辑和重新加载列表（如果事情被删除或列表需要诉诸）。我通过$ .ajax调用完成此操作，但返回并更新了html后，我的点击事件停止工作。事件代表团Ajax调用后坏

我使用$。对他们都绑定到一个父元素按这里堆很多答案，一切的伟大工程的第一次通过，但传球后我所有的环节突破。它也打破了我所有的事件，甚至是我正在更新的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>

我阿贾克斯最初填充细节...面积

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'); 
      }); 
    }

我的一位阿贾克斯的电话，他们都非常相似，因此，如果一个作品都应该。

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

来源

2013-05-06 Valrus

请问您可以使用合理的缩进吗？ – Bergi 2013-05-06 16:40:41

你要绑定的东西，不会被消灭了 - 你不是。当eventlisting内容被覆盖时，您的事件eventdetails被删除。您需要使用maindiv或其他父容器。

来源

2013-05-06 17:00:46

谢谢，这就是它是什么。另外它解释了为什么我的ajax内容没有出现，目标div已经消失。 – Valrus 2013-05-06 17:31:43

$('#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); 
});

来源

2013-05-06 16:59:46 Bergi

事件代表团Ajax调用后坏

回答

相关问题