1

私は本当に混乱しています。多くのスクリプトを含む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();
    });
    ...
});​

それで、あなたはどう思いますか？問題はどこにあるのか、なぜすべての機能が正しく機能したのに、この新しい機能が機能しないのですか?

4

3 に答える 3

2

要素が存在する前にハンドラを追加しました:

$('.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');
});
于 2012-05-09T05:24:07.720 に答える
1

.on()または.delegate()、動的に作成した新しいボタンをリッスンできるようにする必要があります

サンプルコードはこちら

HTML

<コード><div id='test'></div> </コード>

Jクエリ

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

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

ここで例を見ることができます

于 2012-05-09T05:28:05.647 に答える
1

@ジョセフが基本的に言ったこと。注目に値するいくつかのことを指摘するために、コードビットにコメントしました。

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

});
于 2012-05-09T05:33:41.977 に答える