0

我正在做一个项目，其中有一个元素表，如果单击一行，我会将详细信息加载到另一个 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);    
     });
  }
4

2 回答 2

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

然后这是您从 的后代中删除所有侦听器的地方#eventlisting，包括您的#eventdetails. 如果确实使用事件委托，则必须绑定到不变的父元素。因此，将您的代码更改为

$(document).ready(function() { 
    $('#eventlisting')
      .on("click", ".eventrow", getEvent);
      .on("click", "#eventupdate", updateEvent);
      .on("click", "#eventdelete", deleteEvent);
      .on("click", '#eventsubmit', submitEvent);
});
于 2013-05-06T16:59:46.133 回答
1

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

于 2013-05-06T17:00:46.143 回答