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();
});

---

Карим объясняет :

returnЗначение false из обработчика событий jQuery фактически совпадает с вызовом e.preventDefault и e.stopPropagation для переданного объекта jQuery.Event.

e.preventDefault () предотвратит событие по умолчанию, e.stopPropagation () предотвратит всплытие события, а возвращение false сделает оба.Обратите внимание, что это поведение отличается от обычных (не jQuery) обработчиков событий, в которых, в частности, возвращение false не останавливает всплывающее событие.

Answer 3

Я бы упростил ваш ввод переменных. Он не соответствует предоставленному вами HTML-тексту настолько близко, насколько это может понадобиться. Я бы упростил это до этого:

var input = 'input [type = "checkbox"]'; // вероятно достаточно конкретный

Я бы также использовал $ (input) .bind () или $ (input) .live () вместо .each (). Я думаю, что это будет работать больше как то, что вы ищете.

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

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

Answer 4

Насколько я понимаю, вы хотели бы отправить форму о переключении true флажка в каждой строке.

Я бы посоветовал вам получить форму строки и отправить ее, а не отправлятьвсе формы с помощью селектора форм.Вот код:

$(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');
        }
    });
});

Я не понял необходимости отправки формы на снятие флажка.Итак, я прокомментировал форму отправки в снятом режиме.Кроме того, используйте even.preventDefault(), чем возвращать false в операции отправки формы.