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

您是说您尝试在同一个点击事件中提交多个表单吗？如果是这样，我认为问题在于您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中返回false   事件处理程序实际上是相同的   同时调用e.preventDefault和   e.stopPropagation对传递   jQuery.Event对象。

e.preventDefault（）会阻止   发生的默认事件，   e.stopPropagation（）将阻止   冒泡并返回的事件   false会同时做到这两点。请注意这一点   行为与正常不同   （非jQuery）事件处理程序，其中，   值得注意的是，返回false并不会停止   冒泡的事件。

Answer 2

终于找到了它！

$(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 3

据我了解，您希望在每行的复选框切换为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');
        }
    });
});

我不明白需要在取消选中复选框的操作时提交表单。所以，我在uncheck操作中评论了表单提交。另外，在表单提交操作中使用even.preventDefault()而不是返回false。

Answer 4

我会简化你的var输入。它与您提供的HTML尽可能不匹配。我将其简化为：

var input ='input [type =“checkbox”]'; //可能足够具体

我还会使用$（输入）.bind（）或$（输入）.live（）而不是.each（）。我认为它会更像你正在寻找的东西。

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

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

jQuery和Ajax只对第一个元素做出反应！

4 个答案: