Bir sayfadaki tüm seçim kutuları arasında döngü .hoverve genişliklerini ile twiddling biraz yapmak için onlara bir olay bağlama kod biraz var mouse on/off.

Bu sayfada hazır olur ve iyi çalışır.

Sahip olduğum sorun, ilk döngüden sonra Ajax veya DOM ile eklediğim herhangi bir seçim kutusunun olay bağlı olmayacak olmasıdır.

Bu eklentiyi ( jQuery Live Query Eklentisi ) buldum , ancak bir eklenti ile sayfalarıma başka bir 5k eklemeden önce, birinin bunu yapmanın bir yolunu bilip bilmediğini görmek istiyorum, doğrudan jQuery ile veya başka bir seçenekle.

JQuery 1.7'den itibaren şunları kullanmalısınız jQuery.fn.on:

$(staticAncestors).on(eventName, dynamicChild, function() {});

Bundan önce , önerilen yaklaşım aşağıdakileri kullanmaktı live():

$(selector).live( eventName, function(){} );

Bununla birlikte, live()1.7 lehine on()kaldırılmış ve 1.9'da tamamen kaldırılmıştır. live()imza:

$(selector).live( eventName, function(){} );

... aşağıdaki on()imzayla değiştirilebilir :

$(document).on( eventName, selector, function(){} );

Örneğin, sayfanız dinamik olarak sınıf adıyla öğeler oluşturuyorsa dosomething, etkinliği zaten var olan bir üst öğeye bağlarsınız (buradaki sorunun özüdür, bağlanmak için var olan bir şeye ihtiyacınız vardır, dinamik içerik), bu olabilir (ve en kolay seçenek) document. Ancak akılda documenttutulması en etkili seçenek olmayabilir .

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

Olayın bağlı olduğu sırada varolan herhangi bir üst öğe iyidir. Örneğin

$('.buttons').on('click', 'button', function(){
    // do something here
});

için geçerli olurdu

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

Belgelerinde iyi bir açıklama var jQuery.fn.on.

Kısacası:

Olay işleyicileri yalnızca seçili öğelere bağlıdır; kodunuzun çağrıldığı sırada sayfada bulunmaları gerekir .on().

Bu nedenle #dataTable tbody tr, kod oluşturulmadan önce aşağıdaki örnekte bulunmalıdır.

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

Sayfaya yeni HTML enjekte ediliyorsa, bir sonraki bölümde açıklandığı gibi bir olay işleyici eklemek için yetki verilen olayların kullanılması tercih edilir.

Yetki verilen olayların avantajı, daha sonra belgeye eklenen alt öğelerin olaylarını işleyebilmesidir. Örneğin, tablo varsa, ancak satırlar kod kullanılarak dinamik olarak eklenirse, aşağıdakiler tabloyu işleyecektir:

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

Henüz yaratılmayan torun öğeleri üzerindeki olayları işleme yeteneklerine ek olarak, devredilen olayların bir başka avantajı, birçok öğenin izlenmesi gerektiğinde çok daha düşük ek yük potansiyeli olmasıdır. 1.000 satır içeren bir veri tablosunda tbody, ilk kod örneği 1.000 öğeye bir işleyici ekler.

Yetki olayları yaklaşım (ikinci kod örneği) tek bir eleman, bir olay işleyicisi bağlanır tbodyve etkinlik yalnızca (tıklandığında bir seviye kadar kabarcık ihtiyacı triçin tbody).

Not: Yetki verilen etkinlikler SVG için çalışmaz .

Bu, herhangi bir kütüphane veya eklenti içermeyen saf bir JavaScript çözümüdür:

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);

nerede hasClassolduğunu

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

Live demo

Kredi Dave ve Sime Vidas'a gidiyor

Daha modern JS kullanarak hasClassşu şekilde uygulanabilir:

function hasClass(elem, className) {
    return elem.classList.contains(className);
}

Nesneleri oluştururken etkinlik ekleyebilirsiniz. Aynı olayları farklı zamanlarda birden çok nesneye ekliyorsanız, adlandırılmış bir işlev oluşturmak doğru yol olabilir.

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 */ )
;

Etkinlik bağlama çağrınızı bir işleve sarın ve ardından iki kez çağırın: bir kez hazır belge üzerinde ve bir kez de etkinliğinizden sonra yeni DOM öğeleri ekler. Bunu yaparsanız, aynı etkinliği mevcut öğelere iki kez bağlamaktan kaçınmak istersiniz, böylece mevcut etkinlikleri ya da (daha iyisi) yalnızca yeni oluşturulan DOM öğelerine bağlanmanız gerekir. Kod şöyle görünecektir:

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});
}

$(document).ready(function(){
    addCallbacks($(".myEles"))
});

// ... add elements ...
addCallbacks($(".myNewElements"))

.live()Bunun yerine kullanmaya çalışın .bind(); .live()bağlayacaktır .hoverAjax isteği yürütür sonra onay kutusunu.

Dinamik olarak oluşturulan öğeler üzerinde olay bağlama

Tek eleman:

$(document.body).on('click','.element', function(e) {  });

Alt Öğe:

 $(document.body).on('click','.element *', function(e) {  });

Eklendi dikkat edin *. Bu öğenin tüm alt öğeleri için bir etkinlik tetiklenir.

Ben farkettim ki:

$(document.body).on('click','.#element_id > element', function(e) {  });

Artık çalışmıyor, ama daha önce de çalışıyordu. Google CDN'den jQuery kullanıyorum , ancak değiştirip değiştirmediklerini bilmiyorum.

Öğeleri (yeni oluşturulanları bile) onclick olayı gibi olaylara ve işleyicilere bağlamak için live () yöntemini kullanabilirsiniz.

İşte live () yönteminin yeni oluşturulan öğeleri bile olaylara nasıl bağladığını görebileceğiniz, yazdığım örnek bir kod:

<!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>

Seçiciyi kullanmayı tercih ederim ve belgeye uygularım.

Bu, belgeye bağlanır ve sayfa yüklendikten sonra oluşturulacak öğelere uygulanabilir.

Örneğin:

$(document).on("click", 'selector', function() {
    // Your code here
});

Başka bir çözüm, öğeyi oluştururken dinleyiciyi eklemektir. Dinleyiciyi gövdeye koymak yerine, dinleyiciyi oluşturduğunuz anda öğeye koyarsınız:

var myElement = $('<button/>', {
    text: 'Go to Google!'
});

myElement.bind( 'click', goToGoogle);
myElement.append('body');


function goToGoogle(event){
    window.location.replace("http://www.google.com");
}

Bu şekilde dene -

$(document).on( 'click', '.click-activity', function () { ... });

Örneğin, öğenin yerleştirildiği "ANA" sınıfına dikkat edin, örneğin,

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

Yukarıdaki senaryoda, jQuery izleyecek ANA nesne "konteyner" dir.

Sonra temelde gibi kabın altındaki elemanlar adlara sahip olacak ul, live select:

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });

kullanabilirsin

$('.buttons').on('click', 'button', function(){
    // your magic goes here
});

veya

$('.buttons').delegate('button', 'click', function() {
    // your magic goes here
});

bu iki yöntem eşdeğerdir ancak farklı bir parametre sırasına sahiptir.

bkz. jQuery Delege Etkinliği

Öğesini kullanarak dinamik olarak oluşturulduğunda öğeye olay ekleyebilirsiniz jQuery(html, attributes).

JQuery 1.8'den itibaren , herhangi bir jQuery örnek yöntemi (yöntemi jQuery.fn), ikinci parametreye iletilen nesnenin bir özelliği olarak kullanılabilir:

function handleDynamicElementEvent(event) {
  console.log(event.type, this.value)
}
// create and attach event to dynamic element
jQuery("<select>", {
    html: $.map(Array(3), function(_, index) {
      return new Option(index, index)
    }),
    on: {
      change: handleDynamicElementEvent
    }
  })
  .appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Bu olay heyeti tarafından yapılır . Olay sarmalayıcı sınıfı öğeye bağlanacak, ancak seçici sınıf öğesine devredilecek. Bu nasıl çalışır.

$('.wrapper-class').on("click", '.selector-class', function() {
    // Your code here
});

Not:

wrapper sınıfı eleman ex. belge, gövde veya ambalajınız. Sarıcı zaten mevcut olmalıdır . Ancak, selectorsayfa yükleme sırasında sunulması gerekmez. Daha sonra gelebilir ve olay selector hatasız olarak devam eder .

Dinamik olarak oluşturulan öğelerin neden tıklamalara yanıt vermemesinin nedeni:

var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
  console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Geçici bir çözüm olarak, tüm tıklamaları dinlemeniz ve kaynak öğeyi kontrol etmeniz gerekir:

var body = $("body");
var btnB = $("<button>B</button>");
var btnC = $("<button>C</button>");
// Listen to all clicks and
// check if the source element
// is a `<button></button>`.
body.on("click", function (ev) {
  if ($(ev.target).is("button")) {
    console.log(ev.target);
  }
});
// Now you can add any number
// of `<button></button>`.
body.append(btnB);
body.append(btnC);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Buna "Etkinlik Delegasyonu" denir. İyi haber, jQuery'de yerleşik bir özellik :-)

var i = 11;
var body = $("body");
body.on("click", "button", function () {
  var letter = (i++).toString(36).toUpperCase();
  body.append($("<button>" + letter + "</button>"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>

Herhangi p var Arent olay bağlı olduğu anda ve sayfanızın eğer dinamik unsurları oluşturarak sınıf adı ile düğmeye zaten var olan bir ebeveyne olayı bağlamak istiyorum

$(document).ready(function(){
  //Particular Parent chield click
  $(".buttons").on("click","button",function(){
    alert("Clicked");
  });  
  
  //Dynamic event bind on button class  
  $(document).on("click",".button",function(){
    alert("Dymamic Clicked");
  });
  $("input").addClass("button");  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <input type="button" value="1">
  <button>2</button>
  <input type="text">
  <button>3</button>  
  <input type="button" value="5">  
  </div>
<button>6</button>

Etkinliği zaten var olan bir ebeveyne bağlama:

$(document).on("click", "selector", function() {
    // Your code here
});

Canlı işleyiciye olay işleyicileri eklemek için .on()jQuery http://api.jquery.com/on/ yöntemini kullanın .

Ayrıca 1.9 sürümünden itibaren .live()yöntem kaldırıldı.

Olay dinleyicilerinin, bir documentdüzey olay dinleyicisine komut dosyası yazmak yerine modüler bir işlevle dağıtılmasını tercih ederim . Yani, aşağıdaki gibi yapıyorum. Not: Aynı olay dinleyicisine sahip bir öğeye gereğinden fazla abone olamazsınız, bu yüzden bir dinleyiciyi bir kereden fazla takma konusunda endişelenmeyin - yalnızca bir çubuk.

var iterations = 4;
var button;
var body = document.querySelector("body");

for (var i = 0; i < iterations; i++) {
    button = document.createElement("button");
    button.classList.add("my-button");
    button.appendChild(document.createTextNode(i));
    button.addEventListener("click", myButtonWasClicked);
    body.appendChild(button);
}

function myButtonWasClicked(e) {
    console.log(e.target); //access to this specific button
}

Elemanlar oluşturmak ve olayları bağlamak için başka bir esnek çözüm ( kaynak )

// 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);

Not: Bu, her öğe için bir olay işleyici örneği oluşturur (döngülerde kullanıldığında performansı etkileyebilir)

<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>

Dinamik olarak eklenen unsurlarda sorunsuz bir şekilde çalışmak $.bindve $.unbindçalışmak için bir çözüm arıyordum .

On () ' da olduğu gibi , olayları eklemek için hile yapar, geldiklerimde sahte bir bağ oluşturmak için:

const sendAction = function(e){ ... }
// bind the click
$('body').on('click', 'button.send', sendAction );

// unbind the click
$('body').on('click', 'button.send', function(){} );