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 呼び出しの 1 つですが、それらはすべて非常に似ているため、1 つでも機能する場合はすべて機能するはずです。

 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コンテンツがオーバーライドされると、イベントはeventdetails削除されます。maindivまたは他の親コンテナを使用する必要があります。

于 2013-05-06T17:00:46.143 に答える
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 に答える