2009-10-28 68 views
0

我們在「garagecar/view/index.ctp」視圖頁面中有一個部分列表。第一次加載頁面時,部件列表將用PHP填充。每個部分都有一個刪除按鈕。當用戶點擊「刪除」時,控制器鏈接刪除部分,而JQuery的/阿賈克斯刪除,顯示在指數部分的HTML:動態添加的HTML不會通過CakePHP中的JQuery動態刪除

$html->link(__('remove', true), 
      array('controller'=>'garage_parts', 
        'action'=>'delete', 
        $gpart['GaragePart']['id']), 
      array('class'=>'js-ajax remove_part')); 
$(".remove_part").click(function(){ 
    var answer = confirm("Remove this part?"); 
    if (answer){ 
     var partdiv = $(this).parent().parent(); 
     $.ajax({ 
      type: "post", 
      url: this.href, 
     }); 
     $(partdiv).remove(); 
    } 
    return false; 
}); 

當用戶需要動態地添加我們用新的零件JQuery $()。load函數加載「garagepart/view/addpart.ctp」。在addpart.ctp中,有一個$()。ajax函數,它通過JSON添加零件,並將新零件的HTML附加到index.ctp中的零件列表中。

但是,如果您單擊此新部件上的刪除按鈕,則上述JQuery函數不會進行評估。該功能無法刪除HTML,即使它的結構與預裝PHP的部件完全相同。 CakePHP刪除鏈接仍然有效,所以如果你重新加載頁面,那麼這個部分就不存在了。

爲什麼JQuery不動態刪除動態添加的部分?刪除只適用於預裝了PHP的部分,而不是通過JQuery/Ajax添加的新部分。如果您需要我發佈更多代碼,請告訴我...謝謝!

+0

我忘了提及......上面的問題可能與我們使用2個不同的視圖和.load有關嗎?我們嘗試將一些代碼移動到索引文件中,並仍然存在相同的問題... – 2009-10-28 19:24:43

回答

0

你可以使用jQuery中的live()函數來解決你的問題,它基本上就像click(),但是可以「監聽」標記中的變化,並應用於在ajax調用你想要的函數之前添加的新元素。

http://docs.jquery.com/Events/live

+0

此方法無效。我添加了.live(「點擊」,功能...如果結構相同,remove方法不會動態地移除任何東西 – 2009-10-28 20:17:31

+0

它應該可以工作。另外,你可以嘗試使用bind和unbind之類的函數來確保,但live函數應該可以自行工作,它適用於我。 – yoda 2009-10-29 09:32:11

0

我最常做的:

  1. 創建結合事件的元素的函數(bind_remove()
  2. 就在Ajax調用創建新的內容調用bind_remove()之後應該使新的元素工作(即在回調中)。
  3. jQuery(document).ready(function() {});中添加bind_remove()函數,該函數應該使加載的元素開始工作。

這裏就是我的bind_remove()看起來像一個頁面:

function bind_remove() { 
/* bind remove function */ 
    $('img[class="examremover"]').bind('click', function() { 
     var id = $(this).attr('rel'); 
     $('#exrow'+id).remove(); 
     var examenes = $('#ReferenciaExamenes').val(); 
     examenes = examenes.replace(id, ''); 
     $('#ReferenciaExamenes').val(examenes); 

     $('#referencia'+id).remove(); 
     return false; 
    }); 

} 

我的添加和刪除(分離功能),而且工作得很好做到這一點。

0

什麼可以用的是從jQuery的的的liveQuery插件,你可以從這裏得到:http://docs.jquery.com/Plugins/livequery並更改以下行代碼:

FROM:

$(".remove_part").click(function() { 

TO:

$(".remove_part").livequery('click', function() { 

這將監視動態添加的表單元素,並自動將點擊綁定到它。希望有所幫助!