Question

我有一个div我改变了id。我已经检查过新的id是否在那里。然后我调用新的id去做别的事，没有任何反应。

如果div只有具有特定的css时才能让它做某事？在这个例子中，我怎样才能在div为灰色时淡出div？

＆＃13;

$("#red").click(function() {
  $('#red').attr('id', 'grey');
});

$("#grey").click(function() {
  $('#grey').attr('id', 'red');
  $('#grey').fadeOut(800);
});

＆＃13;

#red{
	position: absolute;
	top:10px; left:10px;
	width:100px; height:100px;
	background-color:red;
	cursor:pointer;	
}
	
#grey{
	position: absolute;
	top:10px; left:150px; 
	width:100px; height:100px;
	background-color:grey;
	cursor:pointer;	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="red"></div>

＆＃13;

Answer 1

由于id动态更改，侦听器停止工作，因为他们无法访问动态更改的 元素/属性

因此请使用jQuery .on()

代码需要： -

$(document).on('click',"#red",function() {
    $(this).attr('id', 'grey');
});

$(document).on('click',"#grey",function() {
    $(this).attr('id', 'red');
});

工作代码段： -

$(document).on('click',"#red",function() {
  //$(this).attr('id', 'grey');
  //better to do same kind of effects
  $(this).fadeOut(800, function() { $(this).attr('id', 'grey').show(); });
});

$(document).on('click',"#grey",function() {
  $(this).fadeOut(800, function() { $(this).attr('id', 'red').show(); });
});

#red{
  position: absolute;
  top:10px; left:10px;
  width:100px; height:100px;
  background-color:red;
  cursor:pointer;	
}
	
#grey{
  position: absolute;
  top:10px; left:150px; 
  width:100px; height:100px;
  background-color:grey;
  cursor:pointer;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="red"></div>

Answer 2

听众在页面时注册。您正在动态更改此页面的内容（属性）。因此，不要自己监听元素，而是尝试收听文档。

＆＃13;

$(document).on("click", "#red", function() {
  $('#red').attr('id', 'grey');
});

$(document).on("click", "#grey", function() {
  var $ele = $(this);
  $ele.fadeOut(800, function() { $ele.attr('id', 'red').css("display", "block") });
});

＆＃13;

#red{
  position: absolute;
  top:10px; left:10px;
  width:100px; height:100px;
  background-color:red;
  cursor:pointer;	
}
	
#grey{
  position: absolute;
  top:10px; left:150px; 
  width:100px; height:100px;
  background-color:grey;
  cursor:pointer;	
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="red"></div>

＆＃13;

如何在jQuery中调用动态选择器？

2 个答案: