Question

我有一个带有一些id的元素，我更改了它的ID，当我点击该元素时（现在使用新的ID），它仍然使用之前的ID <调用该函数/ p>

$('#1st').click(function(){
    $('#1st').attr('id','2nd');
    alert("id changed to 2nd");
});
$('#2nd').click(function(){
    alert("clicked on second");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:;" id="1st">Click</a>

示例是here

Answer 1

因为您在元素存在之前添加事件。它找不到元素。更改ID时附加事件或需要使用事件委派。

＆＃13;

    $('#1st').on("click.one", function(e) {
      $('#1st').attr('id', '2nd');
      alert("id changed to 2nd");
      e.stopPropagation();
      $(this).off("click.one");
    });
    $(document).on("click", '#2nd', function() {
      alert("clicked on second");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="1st">Click</a>

＆＃13;

Answer 2

尝试这样做jsFiddle

    $(document).on('click', '#2nd', function(){
		alert("clicked on second");
	})
	.on('click', '#1st', function(e) {
		$('#1st').attr('id','2nd');
		alert("id changed to 2nd");
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="1st">Click</a>

另请参阅有关使用Jquery's .on() versus .click()

的帖子

JQuery-更改元素的id并在单击时调用函数

2 个答案: