事件代表團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調用後壞

回答

相關問題