2

動的に作成された要素に jquery リスナーを追加する必要があります。私は一生これを機能させることはできません。tag_options は動的ではなく、その子は動的です。私は3つの方法を試しました：

http://jsfiddle.net/nfe2f/

<div id = "tag_options">
    <div class = "tag_option">hover me</div>
</div>

js:

// never works
$('#tag_options').delegate('.tag_option', 'hover', function(event){
 alert();
});


// never works
$("#tag_options").on("hover", "[class='tag_option']", function(event) {   
    alert();
});


// works if not dynamically created
$('#tag_options .tag_option').hover( function(){
    alert();
 });
4

5 に答える 5

2

.on("hover"これは、イベントがないために発生します。あなたは使用するmouseenterかmouseleave好きにすることができます：

$(function () {

    // Attach Event
    // new way (jQuery 1.7+) - on(events, selector, handler);
    $('#tag_options').on('mouseenter mouseleave', '.tag_option', function (e) {
        alert(e.type);
    });

    // Create elements dynamically
    $('#tag_options').append('<div class="tag_option">hover me</div>');
});

フィドル

于 2013-08-07T14:26:58.603 に答える
2

hoverイベントはもうありdelegateませんon。mouseenterと を使用したいと思いますmouseleave。私はあなたがこれを狙っていると信じています：

$('#tag_options')
  .on('mouseenter', '.tag_option', function(e){
    /* Wax On */
  })
  .on('mouseleave', '.tag_option', function(e){
    /* Wax Off */
  });

あなたがそれを1つに保ちたい場合onは、パラシンが提案することを行うことができます. 従うのを少し簡単にしたかっただけです：

$('#tag_options').on('mouseenter mouseleave', '.tag_option', function(event){
  if ( event.type === 'mouseenter' ) {
    /* Wax On */
  } else {
    /* Wax Off */
  }
});
于 2013-08-07T14:23:33.883 に答える