元素在課堂更改後失去屬性

Question

我想知道，爲什麼改變一個元素的類（沒有用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); 
     }); 
    }); 
} 

DOM

<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');功能後不再適用於該元素。這是爲什麼？

Answer 1

該綁定僅適用於事件綁定時具有其中一個類的元素。試試這個：

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