Fatal编程技术网
  • javascript/
  • Javascript js文件中的一部分脚本在firebug控制台中正常工作，但在页面中不工作

Javascript js文件中的一部分脚本在firebug控制台中正常工作，但在页面中不工作

javascript jquery

Javascript js文件中的一部分脚本在firebug控制台中正常工作，但在页面中不工作,javascript,jquery,firebug,Javascript,Jquery,Firebug,我真的很困惑，我有一个包含很多脚本的js文件，所有脚本都工作正常，我只是添加了新行： $('.RemoveE').click(function () { alert('yap'); }); 但这不起作用，我用firebug测试了它，一切正常，我还尝试了其他不起作用的浏览器，我必须提到，我用CSS类添加了新按钮=“ReomoveE button red”，这是我的js的一部分，包括新行和添加按钮： // <reference path="../jquery-1.7.1.js" /&

我真的很困惑，我有一个包含很多脚本的js文件，所有脚本都工作正常，我只是添加了新行：

$('.RemoveE').click(function () {
    alert('yap');
});
但这不起作用，我用firebug测试了它，一切正常，我还尝试了其他不起作用的浏览器，我必须提到，我用CSS类添加了新按钮
=“ReomoveE button red”
，这是我的js的一部分，包括新行和添加按钮：

// <reference path="../jquery-1.7.1.js" />
$(document).ready(function() {

    $('.RemoveE').click(function() {
        alert('yap');
    });

    //Add new Addable div
    $('.AddNewE').click(function() {

        var Target = $('.Addable:first');
        var TargetId = $(Target).attr('id');
        var Count = $('.Addable#' + TargetId).size();
        var CloneTarget = $(Target).clone();
        CloneTarget.find('input').val('');
        CloneTarget.insertAfter('.Addable:last');
        var TargetName = $(Target).find('input').attr('name');
        var CloneName = TargetName + '[1]';
        TargetName = TargetName + '[0]';
        $(Target).find('input').attr('name', TargetName);
        $(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName);
        $(CloneTarget).find('input').attr('name', CloneName);
        $(CloneTarget).append($('<input type="button" class="RemoveE button red" value="remove" />'));

        (function($) {
            $.fn.updateValidation = function() {
                var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse(form);
                return this;
            };
        })(jQuery);

        $(Target).updateValidation();
        $(CloneTarget).updateValidation();
    });
    ...
});​

//
$（文档）.ready（函数（）{
$（'.RemoveE'）。单击（函数（）{
警觉（‘雅普’）；
});
//添加新的可添加div
$（'.AddNewE'）。单击（函数（）{
var Target=$（'.Addable:first'）；
var TargetId=$（Target.attr（'id'）；
变量计数=$（'.Addable#'+TargetId）.size（）；
var CloneTarget=$（Target）.clone（）；
CloneTarget.find（'input'）.val（''）；
CloneTarget.insertAfter（'.Addable:last'）；
var TargetName=$（Target）.find（'input'）.attr（'name'）；
var CloneName=TargetName+'[1]'；
TargetName=TargetName+'[0]'；
$（目标）.find（'input'）.attr（'name'，TargetName）；
$（Target.find（'span[class*=“field validation”]'））.attr（'data-valmsg-for'，TargetName）；
$（CloneTarget.find（'input'）.attr（'name'，CloneName）；
$（克隆目标）.append（$（''）；
（函数（$）{
$.fn.updateValidation=函数（）{
var form=此.closest（“表单”）.removeData（“验证方”）.removeData（“不引人注目的验证”）；
$.validator.unobtrusive.parse（表单）；
归还这个；
};
})（jQuery）；
$（目标）.updateValidation（）；
$（ClonetTarget.updateValidation（）；
});
...
});​
那你觉得呢？问题出在哪里？为什么所有函数都能正常工作，但这个新函数没有？

您在元素存在之前添加了处理程序：

$('.RemoveE').click(function() {
    alert('yap');
});

//then later

$(CloneTarget).append($('<input type="button" class="RemoveE button red" value="remove" />'));
您在元素存在之前添加了处理程序：

$('.RemoveE').click(function() {
    alert('yap');
});

//then later

$(CloneTarget).append($('<input type="button" class="RemoveE button red" value="remove" />'));
您需要使用
.on（）
或
.delegate（）
以便它可以侦听您动态创建的任何新按钮

请参见此处的示例代码

HTML

​<代码>​​​​​​​​​​​​​​​​​

JQUERY

​$(document).ready(function() { 
    $('#test').on('click','.removeE', function() {
     alert('yap');
    });

    $('#test').append('<input type="button" class="removeE" value="test"/>');
});​

​$（文档）.ready（函数（）{
$（'#test'）。在（'click'，'.removeE'，function（）上{
警觉（‘雅普’）；
});
$（'#test'）。附加（''）；
});​
您可以看到需要使用
.on（）
或
.delegate（）
的示例，这样它就可以监听您动态创建的任何新按钮

请参见此处的示例代码

HTML

​<代码>​​​​​​​​​​​​​​​​​

JQUERY

​$(document).ready(function() { 
    $('#test').on('click','.removeE', function() {
     alert('yap');
    });

    $('#test').append('<input type="button" class="removeE" value="test"/>');
});​

​$（文档）.ready（函数（）{
$（'#test'）。在（'click'，'.removeE'，function（）上{
警觉（‘雅普’）；
});
$（'#test'）。附加（''）；
});​
你可以看到约瑟夫基本上说的例子。我对你的代码进行了注释，指出了一些值得注意的事情

$(document).ready(function () {

    $('.RemoveE').click(function () {
        alert('yap');
    });

    //Add new Addable div
    $('.AddNewE').click(function () {

        var Target = $('.Addable:first');
        var TargetId = $(Target).attr('id'); // Double wrapping in jQuery

         // ID are unique, selector makes little sense,
         // and `length` is preferable to `size()`
        var Count = $('.Addable#' + TargetId).size();
        var CloneTarget = $(Target).clone(); // Double wrapping in jQuery
        CloneTarget.find('input').val('');
        CloneTarget.insertAfter('.Addable:last');
        var TargetName = $(Target).find('input').attr('name'); // Double wrapping in jQuery

        // This seems a bit verbose...
        var CloneName = TargetName + '[1]';
        TargetName = TargetName + '[0]';
        $(Target).find('input').attr('name', TargetName); // Double wrapping in jQuery
        $(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName); // Double wrapping in jQuery
        $(CloneTarget).find('input').attr('name', CloneName); // Double wrapping in jQuery
        $(CloneTarget).append($('<input type="button" class="RemoveE button red" value="remove" />')); // Double wrapping in jQuery
        // end verbosity

        (function ($) {
            $.fn.updateValidation = function () {
                // Don't need to chain `removeData()` twice,
                // as of jQuery 1.7 you can pass a list
                var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse(form);
                return this;
            };
        })(jQuery);

        $(Target).updateValidation(); // Double wrapping in jQuery
        $(CloneTarget).updateValidation(); // Double wrapping in jQuery
    });

});

$（文档）.ready（函数（）{
$（'.RemoveE'）。单击（函数（）{
警觉（‘雅普’）；
});
//添加新的可添加div
$（'.AddNewE'）。单击（函数（）{
var Target=$（'.Addable:first'）；
var TargetId=$（Target.attr（'id'）；//jQuery中的双包装
//ID是唯一的，选择器没有意义，
//“length”比“size（）更可取`
变量计数=$（'.Addable#'+TargetId）.size（）；
var CloneTarget=$（Target）.clone（）；//jQuery中的双重包装
CloneTarget.find（'input'）.val（''）；
CloneTarget.insertAfter（'.Addable:last'）；
var TargetName=$（Target）.find（'input'）.attr（'name'）；//jQuery中的双包装
//这似乎有点冗长。。。
var CloneName=TargetName+'[1]'；
TargetName=TargetName+'[0]'；
$（Target）.find（'input'）.attr（'name'，TargetName）；//jQuery中的双包装
$（Target.find（'span[class*=“field validation”]'））.attr（'data-valmsg-for'，TargetName）；//在jQuery中双重包装
$（CloneTarget.find（'input'）.attr（'name'，CloneName）；//jQuery中的双包装
$（ClonetTarget）.append（$（''）；//在jQuery中进行双重包装
//结束冗长
（函数（$）{
$.fn.updateValidation=函数（）{
//不需要将`removeData（）`链接两次，
//从jQuery1.7开始，您可以传递一个列表
var form=此.closest（“表单”）.removeData（“验证方”）.removeData（“不引人注目的验证”）；
$.validator.unobtrusive.parse（表单）；
归还这个；
};
})（jQuery）；
$（Target）.updateValidation（）；//jQuery中的双包装
$（ClonetTarget.updateValidation（）；//jQuery中的双包装
});
});

约瑟夫基本上说了些什么。我对你的代码进行了注释，指出了一些值得注意的事情


$(document).ready(function () {

    $('.RemoveE').click(function () {
        alert('yap');
    });

    //Add new Addable div
    $('.AddNewE').click(function () {

        var Target = $('.Addable:first');
        var TargetId = $(Target).attr('id'); // Double wrapping in jQuery

         // ID are unique, selector makes little sense,
         // and `length` is preferable to `size()`
        var Count = $('.Addable#' + TargetId).size();
        var CloneTarget = $(Target).clone(); // Double wrapping in jQuery
        CloneTarget.find('input').val('');
        CloneTarget.insertAfter('.Addable:last');
        var TargetName = $(Target).find('input').attr('name'); // Double wrapping in jQuery

        // This seems a bit verbose...
        var CloneName = TargetName + '[1]';
        TargetName = TargetName + '[0]';
        $(Target).find('input').attr('name', TargetName); // Double wrapping in jQuery
        $(Target).find('span[class*="field-validation"]').attr('data-valmsg-for', TargetName); // Double wrapping in jQuery
        $(CloneTarget).find('input').attr('name', CloneName); // Double wrapping in jQuery
        $(CloneTarget).append($('<input type="button" class="RemoveE button red" value="remove" />')); // Double wrapping in jQuery
        // end verbosity

        (function ($) {
            $.fn.updateValidation = function () {
                // Don't need to chain `removeData()` twice,
                // as of jQuery 1.7 you can pass a list
                var form = this.closest("form").removeData("validator").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse(form);
                return this;
            };
        })(jQuery);

        $(Target).updateValidation(); // Double wrapping in jQuery
        $(CloneTarget).updateValidation(); // Double wrapping in jQuery
    });

});



$（文档）.ready（函数（）{
$（'.RemoveE'）。单击（函数（）{
警觉（‘雅普’）；
});
//添加新的可添加div
$（'.AddNewE'）。单击（函数（）{
var Target=$（'.Addable:first'）；
var TargetId=$（Target.attr（'id'）；//jQuery中的双包装
//ID是唯一的，选择器没有意义，
//“length”比“size（）更可取`
变量计数=$（'.Addable#'+TargetId）.size（）；
var CloneTarget=$（Target）.clone（）；//jQuery中的双重包装
CloneTarget.find（'input'）.val（''）；
CloneTarget.insertAfter（'.Addable:last'）；
var TargetName=$（Target）.find（'input'）.attr（'name'）；//jQuery中的双包装
//这似乎有点冗长。。。
var CloneName=TargetName+'[1]'；
TargetName=TargetName+'[0]'；
$（Target）.find（'input'）.attr（'name'，TargetName）；//jQuery中的双包装
$（Target.find（'span[class*=“field validation”]'））.attr（'data-valmsg-for'，TargetName）；//在jQuery中双重包装
$（克隆目标）.fin