jQuery和Ajax只對第一個元素做出反應！

Question

我在這個頁面上有多種形式我可以選擇使用ajax提交。 問題只是第一個被jQuery執行的對象選擇！

這裏的JS：

$(function() { 
var input = 'table td input[type="checkbox"]'; 
var form = 'form.update_done'; 
var isDone = 0; 

$(input).each(function() { 
    if($(this).attr('checked')) { $(this).parents('tr').removeClass('unDone'); } 
    else { $(this).parents('tr').addClass('unDone'); } 
}); 

$(input).each(function() { 
    $(this).click(function update() { 
     if($(this).attr('checked')) { 
      isDone = 1; 
      $(form).submit(); 
      $(this).parents('tr').removeClass('unDone'); 
     } 
     else { 
      isDone = 0; 
      $(form).submit(); 
      $(this).parents('tr').addClass('unDone'); 
     } 
    }); 
}); 

$(form).submit(function() { 
    $.post(
     'set_done.cfm', 
     { id: $('input[name="id"]').val(), done: isDone }, 
     function(responseText){ 
      // $(this).parents('tr').toggleClass('unDone'); 
     }, 
     "html" 
    ); 
    return false; 
}); 
}); 

和HTML：

<td> 
<form class="update_done"> 
<input type="hidden" name="id" value="#jobs.id#" /> 
<input type="checkbox" <cfif jobs.done IS 1>checked="checked" </cfif>/> 
</form> 
</td> 

任何人都知道我去了軌道？ 如果我不是很清楚，請告訴我。

Answer 1

終於找到了！

$(form).submit(function(e) { 
    e.preventDefault(); 
    $.post(
     'set_done.cfm', 
     { id: $(this).children('input[type="hidden"]').val(), done: isDone }, 
     function(responseText){ 
      // $(this).parents('tr').toggleClass('unDone'); 
     }, 
     "html" 
    ); 
}); 

我的錯誤是，我最初設置「POST ID」找到第一個輸入！ 大代碼的小錯誤太多了！感謝大家的幫助。 如果不是用於@ no.good.at.coding我仍然沒有回答

Answer 2

你是說你想要在同一個點擊事件上提交多個表單嗎？如果是的話，我相信問題在於你的return false;在你的submit()（爲了取消表單提交，對吧？）。但是，使用jQuery，return false;相當於調用event.stopPropagation()和event.preventDefault()。在你的情況下，你不想停止這個事件的傳播，因爲它阻止你提交其他表單。

我相信改變提交處理，以下述應該解決您的問題：

$(form).submit(function(e) { 
    $.post(
     'set_done.cfm', 
     { id: $('input[name="id"]').val(), done: isDone }, 
     function(responseText){ 
      // $(this).parents('tr').toggleClass('unDone'); 
     }, 
     "html" 
    ); 
    e.preventDefault(); 
}); 

---

Karim explains：從一個jQuery 事件處理程序中

回報虛假實際上是相同 爲在傳遞的 jQuery.Event上調用e.preventDefault和 e.stopPropagation目的。

e.preventDefault（）將防止發生的歷史的 默認事件， e.stopPropagation（）將防止起泡了 事件，並返回 false將兩者都做。請注意，此 行爲與正常的 （非jQuery）事件處理程序不同，其中， 顯着返回false並不會停止 事件冒泡。

Answer 3

就我所知，您希望提交表單的每一行中的複選框的切換的真實性。

我建議你獲取行的形式並提交它，而不是使用窗體選擇器提交所有窗體。這裏是代碼：

$(input).each(function() { 
    $(this).click(function update() { 
     if($(this).attr('checked')) { 
      isDone = 1; 
      $(this).parents("tr").find(form).submit(); 
      $(this).parents('tr').removeClass('unDone'); 
     } 
     else { 
      isDone = 0; 
      //$(form).submit(); 
      $(this).parents('tr').addClass('unDone'); 
     } 
    }); 
}); 

我不明白需要提交表單上取消選中複選框的操作。所以，我已經在uncheck操作中評論了表單提交。此外，使用even.preventDefault()而不是在表單提交操作中返回false。

Answer 4

我會簡化你的var輸入。它不符合您提供的HTML所需的HTML。我將它簡化爲：

var input ='input [type =「checkbox」]'; //可能足夠具體

我還會使用$（input）.bind（）或$（input）.live（）而不是.each（）。我認爲它會更像你正在尋找的東西。

http://api.jquery.com/bind/

http://api.jquery.com/live/