Question

我是javascript / jQuery的新手，我有一点问题：）

我正在使用AJAX来获取数据以生成和填充表单字段。之后，我想用javascript函数添加和/或删除字段，但它不起作用。

正如我正在学习的那样，我一步一步地创建我的代码，所以下面的代码实现了ajax请求（这是完美的工作），以及我希望用+图像上的on click属性调用的函数

$(document).ready(function(){

var id = $('#subId').val();
var num     = $('.cloneSub').length;
var newNum  = new Number(num + 1);

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/admin/popsub2/',
    data: 'id='+id,
    async: false,
    success: function(data){

        $.each(data, function(key, val){

            // Add and populate the input text element
            var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum);
            newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum);

            $('#sub' + num).attr('value', val);

            $('#sub' + num).after(newElem);
            $(newElem).before('<br />');

            // Simply add the select element
            var newSelect = $('#editMenu_article' + num).clone().attr('id', 'editMenu_article' + newNum);
            newSelect.children(':first').attr('id', 'editMenu_article' + newNum).attr('name', 'editMenu_article' + newNum);

            $('#editMenu_article' + num).after(newSelect);
            $(newSelect).before('<br />');
        });
    },

    failure: function(){
        alert('echec !!!');
    }
});


function addField(){

    // Add the input text element
    var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum);
    newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum);

    $('#sub' + num).attr('value', val);

    $('#sub' + num).after(newElem);
    $(newElem).before('<br />');

    // Add the select element
    var newSelect = $('#addMenu_article' + num).clone().attr('id', 'addMenu_article' + newNum);
    newSelect.children(':first').attr('id', 'addMenu_article' + newNum).attr('name', 'addMenu_article' + newNum);

    $('#addMenu_article' + num).after(newSelect);
    $(newSelect).before('<br />');

}

});

addField（）函数根本不起作用，我不知道为什么。 AJAX似乎一直在执行脚本。

Thanx求助。

更新

我的+图片是：

<img src="images/plus.png" id="editSub2" />

在您的帮助下，我尝试了这些代码：

$('#editSub2').live('click', function(){ ... });

$('#editSub2').bind('click', function(){ ... });

但没有任何作用。

Answer 1

您已在jQuery文档就绪回调范围内声明addField()。在该功能之外的任何人都无法了解它。您可以将其声明为全局函数，但您可以更好地封装它。您可能会发现类似Javascript Patterns的资源。

Answer 2

如果图像是动态创建的，则应在创建后绑定click事件，如果没有，则在文档就绪块上绑定，必须绑定它。

$('img#myimg').bind("click", function(){

// Add the input text element
    var newElem = $('#sub' + num).clone().attr('id', 'sub' + newNum);
    newElem.children(':first').attr('id', 'sub' + newNum).attr('name', 'sub' + newNum);

    $('#sub' + num).attr('value', val);

    $('#sub' + num).after(newElem);
    $(newElem).before('<br />');

    // Add the select element
    var newSelect = $('#addMenu_article' + num).clone().attr('id', 'addMenu_article' + newNum);
    newSelect.children(':first').attr('id', 'addMenu_article' + newNum).attr('name', 'addMenu_article' + newNum);

    $('#addMenu_article' + num).after(newSelect);
    $(newSelect).before('<br />');


});

Answer 3

听起来你已经遇到了DOM事件处理程序陷阱。如果您曾经处理过没有jQuery的事件，那么这个问题会更有意义。

基本上，当你这样做时会发生什么：

$(".images").click(myFunc);

是jQuery去找并匹配选择器的所有元素，并使用这个（大致）代码将函数myFunc绑定到onclick事件：

element.onclick = myFunc;

（它实际上做了一些更复杂的事情，但只是假设那就是它的作用）

当你运行上面的代码时会发生这种情况，只有这样，添加到DOM的任何额外元素都没有添加该事件，jQuery从未被告知要添加它们！

然而，一切都没有丢失，你可以使用jQuery中的辉煌.live()函数来绑定所有匹配的元素，无论是现有的还是将来的。它比不必手动重新绑定新元素更容易使用更简单，更容易使用。一个小的缺点是它会干扰事件排序，你必须使用类似.bind()的界面，所以你改用.live("click", myfunc)。

修改

根据您的更多问题，似乎问题在于您已经绑定到#editSub2但正在生成#editSub<n>因此jQuery不知道您在做什么。我建议使用类将常用功能推送到元素上，并将独特元素的ID推送到其中，这可能更有效。

使用AJAX后，我无法调用我的onclick javascript函数

3 个答案: