jQuery元素AJAX後點擊

我的項目有一個使用jQuery UI選項卡的頁面。每個選項卡使用AJAX調用一個文件，每個文件都顯示一個列表。這些列表中的每個<li>元素都有一個像<input type = "checkbox" />這樣的子元素。jQuery元素AJAX後點擊

當我點擊<li>上的任何位置時，我需要的是checkbox元素的選中狀態或取消選中狀態（取決於之前的狀態）。

我已經嘗試使用這樣的功能，如<li onclick = "javascript: CheckboxClick();">，它工作正常，直到用戶試圖點擊實際的複選框。然後，該函數與複選框的操作同時運行，導致它們相互取消。

我試過在$(document).ready()上使用類似版本的函數來排除複選框的子項來觸發此函數，但是這些列表是使用AJAX創建的，並且沒有包含初始DOM的一部分。該功能不起作用。我嘗試使用click而不是on()，因爲根據w3schools on() method explanation它聲明「on（）方法將適用於當前和FUTURE元素（如由腳本創建的新元素）。」我沒有成功。

後者嘗試是這樣的：

$("li.single-line.restore-manager").on("click", function() { 
    //code 

}).children('input[type="checkbox"]').click(function (e) { 

    return false; 
});

，實際上什麼也沒有發生。

如何使這項工作的任何想法？

來源

2013-07-11 Dimitris Damilos

不'solve'你的問題，但是當你的onclick運行自定義功能只是檢查或取消自己的呢？ – We0

你是什麼意思？ –

這是你在找什麼？

$(document).on("click", "li.single-line.restore-manager", function (e) { 
    if (e.target.nodeName != "INPUT") { 
     var myChks = $(this).children(":checkbox"); 
     $.each(myChks, function() { 
      if ($(this).is(":checked") === true) { 
       $(this).prop("checked", false); 
      } else { 
       $(this).prop("checked", true); 
      } 
     }); 
    }; 
});

JSFIDDLE

來源

2013-07-11 13:49:45 DevlshOne

啊，我看到，踢球者是這個部分：**直到用戶試圖點擊實際的複選框。然後，該功能與複選框的操作同時運行，導致它們相互取消。** – DevlshOne

沒錯。有任何想法嗎？ –

我現在擺弄它。 :) – DevlshOne

更新的代碼來處理複選框，點擊：

$(document).on("click", 'li.single-line.restore-manager', function(e){ // Use document or parent of li which exists before `AJAX` call 
    if (e.target.nodeName != 'INPUT') { 
     // your code here 
    } 
});

來源

2013-07-11 13:39:57

不，這也行不通，但謝謝你的回覆。 –

錯誤我有雙引號'li'選擇器''「li.single-line.restore-manager」'，正確的代碼是''li.single-line.restore-manager''，回答更新 –

jQuery元素AJAX後點擊

回答

相關問題