0

要素のクラスを変更すると (id を試していない)、クラス セットで動作する関数に応答しなくなるのはなぜですか?

例

js関数

function addImg(element) {
    $(element).click(function() {
        var $block = $(this).is('img') ? $(this).parent() : $(this);
        var $name  = $block.attr('id');
        $('input[name="'+$name+'"]').click();
        $('input[name="'+$name+'"]').change(function() {
            $block.css('border-color', '#cecece')
            readURL(this, $block);
        });
    });
}

ドム

<div class="has-img">
   <a class="remove-image"> Remove Image </a>
   <img src="blalbalba.jpg" />
</div>

jsコード

$('.remove-image').click(function() {
    $(this).parent().removeClass('has-img').addClass('no-img').find('img').remove();
    $(this).remove();
});

addImg('.has-img img, .no-img');

その要素に対して関数が機能しなくなっ.removeClass('has-img').addClass('no-img')た後。addImg('.has-img img, .no-img');何故ですか？

4

1 に答える 1

5

バインドは、イベントがバインドされた時点でこれらのクラスのいずれかを持つ要素でのみ機能します。これを試して：

$(document).on('click', '.has-img img, .no-img', function() {
    var $block = $(this).is('img') ? $(this).parent() : $(this);
    var $name  = $block.attr('id');
    $('input[name="'+$name+'"]').click();
    $('input[name="'+$name+'"]').change(function() {
        $block.css('border-color', '#cecece')
        readURL(this, $block);
    });
});

$(document).on('click', '.remove-image', function() {
    $(this).parent().removeClass('has-img').addClass('no-img').find('img').remove();
    $(this).remove();
});
于 2013-07-08T15:52:46.110 に答える