js文件中脚本的一部分在Firebug控制台上正常工作，但在页面中不起作用

A part of script in js file worked correctly with firebug console but not worked in page

本文关键字：工作 不起作用 脚本 文件 一部分 Firebug js 控制台 常工作      更新时间：2023-09-26

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

$('.RemoveE').click(function () {
    alert('yap');
});
但这不起作用，我

用Firebug对其进行了测试，一切都很好，我也尝试了另一个也不起作用的浏览器，我必须提到我通过脚本="ReomoveE button red"使用CSS类添加新按钮，这是我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();
    });
    ...
});​

那你怎么看？问题出在哪里，为什么所有功能都正常工作，但这个新功能没有？

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

$('.RemoveE').click(function() {
    alert('yap');
});
//then later
$(CloneTarget).append($('<input type="button" class="RemoveE button red" value="remove" />'));

尝试：

在创建时添加处理程序：

var newInput = $('<input type="button" class="RemoveE button red" value="remove" />')
newInput.click(function(){
    alert('yap');
});
$(CloneTarget).append(newInput)

或on()委派 

$(parent_of_RemoveE).on('click','.RemoveE',function() {
    alert('yap');
});
您需要

使用.on()或.delegate()，以便它可以收听您动态创建的任何新按钮

请参阅此处的示例代码

.HTML

<div id='test'></div>​​​​​​​​​​​​​​​​​

简讯

​$(document).ready(function() { 
    $('#test').on('click','.removeE', function() {
     alert('yap');
    });
    $('#test').append('<input type="button" class="removeE" value="test"/>');
});​

您可以在此处查看示例

@Joseph基本上说了什么。我注释了您的代码位以指出一些值得注意的事情。

$(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
    });
});
相关文章：