-1

jqueryを使用して動的に作成された要素にマウスオーバー機能を追加しようとしています

$('#schools').append(
    '<div class="mediumListIconTextItem" onclick="javascript:showSchoolReport(\'' + $.trim(this.id) + '\',\'' + $.trim(this.companyID) + '\',\'' + $.trim(this.companyCode) + '\',\'' + $.trim(this.companyName) + '\');" style="padding-left: 30px;margin: 5px;">' + '<div class="icon-newspaper mediumListIconTextItem-Image"></div>' + '<div class="mediumListIconTextItem-Detail">' + '<h6 id="header" style="max-width:100px; overflow:hidden;">' + this.name + ' - ' + this.companyName + '</h6></div></div>');

マウスオーバー効果のコード

$(document).ready(function (e) {
    $(".mediumListIconTextItem").mouseover(function () {
        alert($(this.name));
    });
});
$(".mediumListIconTextItem").on("mouseover", function () {
    alert('mouseover works!!!!!!!!!');
});
});

上記のマウスオーバー機能はどれも機能しません。私のコードの何が問題なのですか。解決策を提案する

4

5 に答える 5

2

と呼ばれるケースevent delegationです。ここでは、直接イベントを動的に作成された elem にバインドすることはできません。以下のようにこれを試してください：

$(document).on("mouseover", ".mediumListIconTextItem", function() {
   alert('mouseover works!!!!!!!!!');
});
于 2013-11-06T13:14:38.113 に答える
0

.on()を使用する

要素は動的に追加されるため、イベントをそれらに直接バインドすることはできません。そのため、 Event Delegationを使用する必要があります。

$(document).on("mouseover", ".mediumListIconTextItem", function() { .code here. }

より良い使用

$("#schools").on("mouseover", ".mediumListIconTextItem", function() { .code here. }

構文

$( elements ).on( events, selector, data, handler );
于 2013-11-06T13:12:55.463 に答える
0

イベント委任を使用する:

$('#schools').on('mouseover', '.mediumListIconTextItem', function(){ ... })

イベント委任のしくみに関する明確で短い説明については、次の質問を参照してください。

直接対委任 - jQuery .on()

于 2013-11-06T13:12:57.450 に答える
0

あなたはほとんどそこにいます、あなたは使わなければなりませんがon、別の形で。直接イベントを使用していますが、委任イベントを使用する必要があります

$('#schools').on("mouseover", ".mediumListIconTextItem", function() { .. }

詳細については、「直接および委任されたイベント」セクションを確認してください

于 2013-11-06T13:12:46.730 に答える
0

次のような動的に追加される要素にはon()を使用します。

$(document).on("mouseover", ".mediumListIconTextItem", function() {
       alert('mouseover works!!!!!!!!!');
});
于 2013-11-06T13:12:50.197 に答える