JQuery 对事件进行动态处理的一个问题
June 15th, 2010对于以下代码：
<a id="link" onclick="alert('hello')" >link</a>
<script>
alert($('#link').attr('onclick'));
$('#link').attr('onclick', "alert('world')");
alert($('#link').attr('onclick'));
</script>
<script>
alert($('#link').attr('onclick'));
$('#link').attr('onclick', "alert('world')");
alert($('#link').attr('onclick'));
</script>
上面的代码会让原来的onclick事件失效。
<a id="link" onclick="alert('hello')" >link</a>
<script>
alert($('#link').attr('onclick'));
$('#link').attr('onclick', '').click(function(){alert('world')});
alert($('#link').attr('onclick'));
</script>
<script>
alert($('#link').attr('onclick'));
$('#link').attr('onclick', '').click(function(){alert('world')});
alert($('#link').attr('onclick'));
</script>
上面的代码能够实现绑定一个新事件，但是如果onclick的参数里面有this，这样也是不行的。
<a id="link" onclick="alert(this).text()" >hello</a>
<script>
alert($('#link').attr('onclick'));
$('#link').replaceWith('<a id="link" onclick="alert($(this).text())">world</a>');
alert($('#link').attr('onclick'));
</script>
<script>
alert($('#link').attr('onclick'));
$('#link').replaceWith('<a id="link" onclick="alert($(this).text())">world</a>');
alert($('#link').attr('onclick'));
</script>
必须使用上面的代码才能正确得处理带有this的onclick属性。
问题的原因不是很清楚（不知道是JQuery的问题还是浏览器处理机制的问题），所以在使用Jquery的时候，应尽量避免在Dom操作的时候处理事件属性。