Question

我有一组像这样的嵌套元素。

<div id="master">
    <span id="num-1" class="num"></span>
    <span id="num-2" class="num"></span>
    <span id="num-3" class="num"></span>
    <span id="num-4" class="num"></span>
</div>

我有以下脚本

$( document ).ready( function() {
    $( '#master > span.num' ).click( function() {
        q = $( "span[id*=num-']" ).attr( "id" );
        $( '#master' ).html( '&nbsp;' ).load( 'www.someurl.com/?rating=' + q );
    });
});

load函数为div内部返回一组全新的span元素。问题是，我似乎无法弄清楚如何在我第一次点击它之后使用它。由于点击与跨度相关联并且跨度被替换，我理解他们不再有与之绑定的脚本，但我无法弄清楚如何让它重新绑定。我是jquery和javascript的新手，所以任何帮助都会得到满足。

我使用.live（）的所有实验都只是让我的脚本变得无用。帮助

Answer 1

DEMO： http://so.devilmaycode.it/re-tying-a-the-jquery-click-dynamically-after-replacing-the-element/

已编辑：，如Beejamin

所示

$( function() {
    $('#master').click( function(e) { 
    if (e.target.className.indexOf('num') !== -1) {
        var num = e.target.id.split('-')[1]; //this give you # instead of num-#
        $(this).load( 'rating.php/?rating=' + num );
      }  
    });
});

  $(function() {
    $('.num').live('click',function() {
     var num = this.id.split('-')[1]; //this give you # instead of num-#
        $('#master').load( 'rating.php?rating=' + num );
          return false;
    });
});

我想你正在尝试做一个评级系统？仅仅是为了我的PHP文件看起来像这样：

<?php
  if (isset($_GET['rating'])) {
  $rating = (int) $_GET['rating'];
  for ($i = 1; $i < 5; $i++) {
    $a .= "<a id='num-{$i}' class='num".($rating >= $i ? ' rated' : '')."'></a>";
  }
  echo $a;
}
?>

Answer 2

有一种更好的方法来处理这种称为“事件委托”的方法 - 而不是将点击事件分配给每个单独的跨度，您可以将事件分配给#master div。因为点击事件'冒泡' - 当您点击任何元素时，点击事件将被传递到#master div。事件本身包含.target属性，该属性是对单击的原始元素的引用。

这要快得多（你只需要分配一个事件，而不是很多），只需要设置一次。

您的代码示例变为：

$( document ).ready( function() {
    $( '#master' ).click( function(e) {
    if (e.target.className == 'num') {//Check if the target that was clicked is one of the elements we want.
        q = $(e.target).attr('id');
        $('#master').html('&nbsp;').load( 'http://www.someurl.com/?rating=' + q );
      }
    });
});

以下是有关事件委派的一些背景知识：http://www.cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders以及有关事件冒泡的更多信息：http://www.quirksmode.org/js/events_order.html

您唯一需要注意的是，如果您在span.num中添加额外的HTML，e.target将指向该元素（如果它被点击）（这很容易解释）。如果你只想在跨度中找到文本，你可以使用这段代码。

Answer 3

您可以为其定义一个函数并提供递归

function spanClicked(){
    q = $( "span[id*=num-']" ).attr( "id" );
    $( '#master' ).html( '&nbsp;' ).load( 'www.someurl.com/?rating=' + q );
    $( '#master > span.num' ).click( spanClicked);
}

$( document ).ready( function() {
    $( '#master > span.num' ).click( spanClicked);
});

Answer 4

您可以使用jQuery .live()动态绑定事件。您可以检查插件http://docs.jquery.com/Plugins/livequery以获得更多灵活性。

在替换元素后动态地重新绑定jquery点击

4 个答案: