ページ上のすべての選択ボックスをループし、.hoverイベントをそれらにバインドして、の幅を少し調整するコードがありmouse on/offます。
これはページの準備ができたときに発生し、問題なく機能します。
私が抱えている問題は、最初のループの後にAjaxまたはDOMを介して追加した選択ボックスには、イベントがバインドされないことです。
このプラグイン（jQuery Live Query Plugin）を見つけましたが、プラグインを使用してページにさらに5kを追加する前に、jQueryを直接または別のオプションでこれを行う方法を誰かが知っているかどうかを確認したいと思います。
jQuery 1.7以降jQuery.fn.on、セレクターパラメーターを入力して使用する必要があります。
$(staticAncestors).on(eventName, dynamicChild, function() {});
説明：
これはイベント委任と呼ばれ、次のように機能します。staticAncestorsイベントは、処理する必要がある要素の静的な親 ( ) に関連付けられます。この jQuery ハンドラーは、この要素または子孫要素の 1 つでイベントがトリガーされるたびにトリガーされます。その後、ハンドラーは、イベントをトリガーした要素がセレクター ( dynamicChild) と一致するかどうかを確認します。一致すると、カスタム ハンドラ関数が実行されます。
これより前は、次の方法を使用することをお勧めしましたlive()。
$(selector).live( eventName, function(){} );
ただし、live()は 1.7 で廃止さon()れ、1.9 で完全に削除されました。live()署名:
$(selector).live( eventName, function(){} );
on()... 次の署名に置き換えることができます。
$(document).on( eventName, selector, function(){} );
たとえば、ページがクラス名dosomethingを持つ要素を動的に作成している場合、イベントを既に存在する親にバインドします(これがここでの問題の核心です。バインドするために存在するものが必要です。動的コンテンツ)、これは (そして最も簡単なオプション) ですdocument。ただしdocument、最も効率的なオプションではない可能性があることに注意してください。
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});
イベントがバインドされた時点で存在する親は問題ありません。例えば
$('.buttons').on('click', 'button', function(){
// do something here
});
に適用されます
<div class="buttons">
<!-- <button>s that are generated dynamically and added here -->
</div>
のドキュメントに適切な説明がありますjQuery.fn.on。
要するに：
イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが を呼び出す時点でページに存在している必要があります
.on()。
したがって、次の例で#dataTable tbody trは、コードが生成される前に存在する必要があります。
$("#dataTable tbody tr").on("click", function(event){
console.log($(this).text());
});
新しい HTML がページに挿入されている場合は、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチすることをお勧めします。
委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。たとえば、テーブルが存在するが、行がコードを使用して動的に追加される場合、次のように処理されます。
$("#dataTable tbody").on("click", "tr", function(event){
console.log($(this).text());
});
まだ作成されていない子孫要素のイベントを処理する機能に加えて、委譲イベントのもう 1 つの利点は、多くの要素を監視する必要がある場合のオーバーヘッドを大幅に削減できることです。に 1,000 行あるデータ テーブルでtbody、最初のコード例は 1,000 要素にハンドラをアタッチします。
委譲イベント アプローチ (2 番目のコード例) では、イベント ハンドラーを 1 つの要素 のみにアタッチし、イベントは1 レベル (クリックされたから へ)tbodyバブルアップするだけで済みます。trtbody
注:委任されたイベントはSVGでは機能しません。
これは、ライブラリやプラグインを使用しない純粋な JavaScriptソリューションです。
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'bu')) {
// .bu clicked
// Do your thing
} else if (hasClass(e.target, 'test')) {
// .test clicked
// Do your other thing
}
}, false);
どこhasClassですか
function hasClass(elem, className) {
return elem.className.split(' ').indexOf(className) > -1;
}
クレジットは Dave と Sime Vidas に贈られます
より最新の JS を使用すると、次のhasClassように実装できます。
function hasClass(elem, className) {
return elem.classList.contains(className);
}
以下に埋め込まれた同じ jsfiddle Live デモ:
function hasClass(elem, className) {
return elem.classList.contains(className);
}
document.addEventListener('click', function(e) {
if (hasClass(e.target, 'bu')) {
alert('bu');
document.querySelector('.bu').innerHTML = '<div class="bu">Bu<div class="tu">Tu</div></div>';
} else if (hasClass(e.target, 'test')) {
alert('test');
} else if (hasClass(e.target, 'tu')) {
alert('tu');
}
}, false);.test,
.bu,
.tu {
border: 1px solid gray;
padding: 10px;
margin: 10px;
}<div class="test">Test
<div class="bu">Bu</div>test
</div>オブジェクトを作成するときに、オブジェクトにイベントを追加できます。同じイベントを異なる時間に複数のオブジェクトに追加する場合は、名前付き関数を作成するのが良い方法かもしれません。
var mouseOverHandler = function() {
// Do stuff
};
var mouseOutHandler = function () {
// Do stuff
};
$(function() {
// On the document load, apply to existing elements
$('select').hover(mouseOverHandler, mouseOutHandler);
});
// This next part would be in the callback from your Ajax call
$("<select></select>")
.append( /* Your <option>s */ )
.hover(mouseOverHandler, mouseOutHandler)
.appendTo( /* Wherever you need the select box */ )
;
イベント バインディングの呼び出しを関数にラップしてから、それを 2 回呼び出すことができます。1 回はドキュメントの準備ができたとき、もう 1 回は新しい DOM 要素を追加するイベントの後です。その場合、既存の要素に同じイベントを 2 回バインドすることを避けたいので、既存のイベントのバインドを解除するか、(より良い) 新しく作成された DOM 要素にのみバインドする必要があります。コードは次のようになります。
function addCallbacks(eles){
eles.hover(function(){alert("gotcha!")});
}
$(document).ready(function(){
addCallbacks($(".myEles"))
});
// ... add elements ...
addCallbacks($(".myNewElements"))
.live()の代わりに使用してみてください.bind()。これは、Ajax リクエストの実行後にチェックボックスに.live()バインドされます。.hover
単一要素:
$(document.body).on('click','.element', function(e) { });
子要素:
$(document.body).on('click','.element *', function(e) { });
が追加されていることに注意してください*。その要素のすべての子に対してイベントがトリガーされます。
私はそれに気づきました：
$(document.body).on('click','.#element_id > element', function(e) { });
もう機能していませんが、以前は機能していました。Google CDNのjQuery を使用していますが、変更されたかどうかはわかりません。
live() メソッドを使用して、要素 (新しく作成された要素も含む) を onclick イベントのようなイベントやハンドラーにバインドできます。
これは私が書いたサンプルコードです。 live() メソッドが、選択した要素 (新しく作成されたものも含む) をイベントにバインドする方法を確認できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<input type="button" id="theButton" value="Click" />
<script type="text/javascript">
$(document).ready(function()
{
$('.FOO').live("click", function (){alert("It Works!")});
var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({
autoOpen: false,
tite: 'Basic Dialog'
});
$('#theButton').click(function()
{
$dialog.dialog('open');
return('false');
});
$('#CUSTOM').click(function(){
//$('#container').append('<input type="button" value="clickmee" class="FOO" /></br>');
var button = document.createElement("input");
button.setAttribute('class','FOO');
button.setAttribute('type','button');
button.setAttribute('value','CLICKMEE');
$('#container').append(button);
});
/* $('#FOO').click(function(){
alert("It Works!");
}); */
});
</script>
</body>
</html>
このようにしてみてください -
$(document).on( 'click', '.click-activity', function () { ... });
要素が配置されている「MAIN」クラスに注意してください。たとえば、
<div class="container">
<ul class="select">
<li> First</li>
<li>Second</li>
</ul>
</div>
上記のシナリオでは、jQuery が監視する MAIN オブジェクトは「コンテナー」です。
次に、基本的に、、、、などのコンテナの下に要素名がulありliますselect。
$(document).ready(function(e) {
$('.container').on( 'click',".select", function(e) {
alert("CLICKED");
});
});
あなたが使用できる
$('.buttons').on('click', 'button', function(){
// your magic goes here
});
また
$('.buttons').delegate('button', 'click', function() {
// your magic goes here
});
これら 2 つのメソッドは同等ですが、パラメーターの順序が異なります。
要素を作成してイベントをバインドする別の柔軟なソリューション ( source )
// creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});
//creating a dynamic button
var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });
// binding the event
$btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
console.log('clicked');
});
// append dynamic button to the dynamic container
$div.append($btn);
// add the dynamically created element(s) to a static element
$("#box").append($div);
注:これにより、各要素のイベント ハンドラー インスタンスが作成されます (ループで使用するとパフォーマンスに影響する場合があります)。
<html>
<head>
<title>HTML Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="hover-id">
Hello World
</div>
<script>
jQuery(document).ready(function($){
$(document).on('mouseover', '#hover-id', function(){
$(this).css('color','yellowgreen');
});
$(document).on('mouseout', '#hover-id', function(){
$(this).css('color','black');
});
});
</script>
</body>
</html>