මා සතුව කේතයක් ඇත, එහිදී මම පිටුවක ඇති සියලුම තෝරාගත් පෙට්ටි හරහා .hoverලූපයක් ගසමින් ඒවායේ පළල සමඟ මඳක් විකෘති කිරීමක් කිරීමට සිදුවීමක් ඔවුන්ට බැඳ තබමි mouse on/off.

මෙය සූදානම් පිටුවේ සිදු වන අතර එය හොඳින් ක්‍රියාත්මක වේ.

මට ඇති ගැටළුව නම්, ආරම්භක ලූපයෙන් පසුව මම අජැක්ස් හෝ ඩොම් හරහා එකතු කරන ඕනෑම තෝරාගත් පෙට්ටියකට සිදුවීම බැඳී නොතිබීමයි.

මම මෙම ප්ලගිනය සොයාගෙන ඇත ( jQuery සජීවී විමසුම් ප්ලගිනය ), නමුත් මම ප්ලගිනයක් සමඟ මගේ පිටුවලට තවත් 5k එකතු කිරීමට පෙර, jQuery සමඟ කෙලින්ම හෝ වෙනත් විකල්පයක් මඟින් මෙය කිරීමට ක්‍රමයක් කිසිවෙකු දන්නේ දැයි බැලීමට මට අවශ්‍යය.

JQuery 1.7 වන විට ඔබ jQuery.fn.onපුරවා ඇති තේරීම් පරාමිතිය සමඟ භාවිතා කළ යුතුය :

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

පැහැදිලි කිරීම:

මෙය සිදුවීම් නියෝජිත කණ්ඩායම ලෙස හැඳින්වෙන අතර පහත පරිදි ක්‍රියා කරයි. සිද්ධිය staticAncestorsහැසිරවිය යුතු මූලද්‍රව්‍යයේ ස්ථිතික මාපිය ( ) සමඟ අමුණා ඇත. මෙම මූලද්‍රව්‍යය හෝ පැවත එන මූලද්‍රව්‍යයන්ගෙන් සිදුවීමක් අවුලුවන සෑම අවස්ථාවකම මෙම jQuery හසුරුවන්නා අවුලුවන. සිදුවීම අවුලුවන මූලද්‍රව්‍යය ඔබේ තේරීම් කාරකයට ( 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,000 ක් සහිත දත්ත වගුවක tbody, පළමු කේත උදාහරණය හසුරුවන්නාට මූලද්‍රව්‍ය 1,000 ක් සම්බන්ධ කරයි.

පවරන ලද සිදුවීම් ප්‍රවේශයක් (දෙවන කේත උදාහරණය) සිදුවීම් හසුරුවන්නෙකු එක් මූලද්‍රව්‍යයකට පමණක් සම්බන්ධ කරයි tbody, සහ සිදුවීමට අවශ්‍ය වන්නේ එක් මට්ටමක් (ක්ලික් කළ trසිට tbody) දක්වා පමණි.

සටහන: පවරා ඇති සිදුවීම් SVG සඳහා ක්‍රියා නොකරයි .

මෙය පුස්තකාල හෝ ප්ලගීන නොමැතිව පිරිසිදු ජාවාස්ක්‍රිප්ට් විසඳුමකි:

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

Live demo

ණය ඩේව් සහ සිම් විදාස්ට හිමිවේ

වඩාත් නවීන JS භාවිතා කරමින්, පහත hasClassපරිදි ක්‍රියාත්මක කළ හැකිය:

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

ඔබ වස්තූන් නිර්මාණය කරන විට ඒවාට සිදුවීම් එකතු කළ හැකිය. ඔබ එකම සිදුවීම් විවිධ වස්තු වලට විවිධ වේලාවන්හි එකතු කරන්නේ නම්, නම් කරන ලද ශ්‍රිතයක් නිර්මාණය කිරීම යන්නට මාර්ගය විය හැකිය.

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

ඔබට ඔබගේ සිදුවීම් බන්ධන ඇමතුම ශ්‍රිතයක් තුළට ඔතා ඉන්පසු දෙවරක් ආයාචනා කළ හැකිය: ලේඛනය සූදානම් වූ පසු සහ ඔබගේ සිදුවීමෙන් පසු නව DOM අංග එකතු කරයි. ඔබ එසේ කරන්නේ නම්, එකම සිදුවීම පවත්නා මූලද්‍රව්‍ය මත දෙවරක් බැඳීමෙන් වැළකී සිටීමට ඔබට අවශ්‍ය වනු ඇත, එවිට ඔබට අවශ්‍ය වන්නේ දැනට පවතින සිදුවීම් බන්ධනය කිරීම හෝ (වඩා හොඳ) අලුතින් සාදන ලද DOM මූලද්‍රව්‍ය සමඟ පමණක් බැඳීමයි. කේතය මේ වගේ දෙයක් වනු ඇත:

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

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

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

.live()ඒ වෙනුවට භාවිතා කිරීමට උත්සාහ කරන්න .bind(); මෙම .live()බැඳ ඇත .hoverමෙම Ajax ඉල්ලීම ඉටු කරන පසුව ඔබේ පිරික්සුම් කොටුව කිරීමට.

ගතිකව සාදන ලද මූලද්‍රව්‍ය මත සිදුවීම් බන්ධනය

තනි අංගය:

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

ළමා අංගය:

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

එකතු කළ බව සැලකිල්ලට ගන්න *. එම මූලද්‍රව්‍යයේ සියලුම දරුවන් සඳහා සිදුවීමක් අවුලුවන.

මම එය දුටුවෙමි:

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

එය තවදුරටත් ක්‍රියාත්මක නොවේ, නමුත් එය පෙර ක්‍රියාත්මක විය. මම ගූගල් සීඩීඑන් වෙතින් jQuery භාවිතා කර ඇත , නමුත් ඔවුන් එය වෙනස් කළේ දැයි මම නොදනිමි.

ඔන්ක්ලික් සිද්ධිය වැනි සිදුවීම් සහ හසුරුවන්නන් සමඟ මූලද්‍රව්‍ය (අලුතින් සාදන ලද ඒවා පවා) බැඳීමට ඔබට සජීවී () ක්‍රමය භාවිතා කළ හැකිය.

මෙන්න මම ලියා ඇති නියැදි කේතයක්, සජීවී () ක්‍රමය මඟින් තෝරාගත් අංග, අලුතින් සාදන ලද ඒවා පවා සිදුවීම් සමඟ බැඳ තබන ආකාරය ඔබට දැකගත හැකිය:

<!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", 'selector', function() {
    // Your code here
});

තවත් විසඳුමක් වන්නේ මූලද්රව්යය නිර්මාණය කිරීමේදී සවන්දෙන්නන් එකතු කිරීමයි. සවන්දෙන්නන් ශරීරය තුළට දැමීම වෙනුවට, ඔබ එය නිර්මාණය කරන මොහොතේම සවන්දෙන්නාව මූලද්‍රව්‍යයට දමයි:

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

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


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

මේ ආකාරයට උත්සාහ කරන්න -

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

මූලද්රව්යය තබා ඇති "MAIN" පන්තිය සැලකිල්ලට ගන්න, උදාහරණයක් ලෙස

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

ඉහත තත්වය තුළ, jQuery නැරඹිය හැකි ප්‍රධාන වස්තුව "බහාලුම්" වේ.

එවිට ඔබට මූලික වශයෙන් වැනි රුවනයකි යටතේ අංග නම් ඇති වෙයි ul, liසහ select:

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

මෙය සිදු කරනු ලබන්නේ සිදුවීම් නියෝජිත කණ්ඩායම විසිනි. සිදුවීම එතීෙම් පංතියේ මූලද්‍රව්‍යය මත බැඳී ඇති නමුත් තේරීම් පන්තියේ මූලද්‍රව්‍යයට පවරනු ලැබේ. එය ක්‍රියාත්මක වන ආකාරය මෙයයි.

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

සටහන:

එතීමේ පන්තියේ මූලද්‍රව්‍යය ඕනෑම දෙයක් විය හැකිය. ලේඛනය, ශරීරය හෝ ඔබේ එතීම. රැපර් දැනටමත් පැවතිය යුතුය . කෙසේ වෙතත්, selectorපිටු පැටවීමේ වේලාවේදී ඉදිරිපත් කිරීම අවශ්‍ය නොවේ. එය පසුව පැමිණිය හැකි අතර සිදුවීම selector නොවරදවාම බැඳී ඇත .

ඔබට භාවිතා කළ හැකිය

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

හෝ

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

මෙම ක්‍රම දෙක සමාන නමුත් වෙනස් පරාමිති අනුපිළිවෙලක් ඇත.

බලන්න: jQuery නියෝජිත සිදුවීම

භාවිතයෙන් ගතිකව නිර්මාණය කළ විට ඔබට සිදුවීම මූලද්‍රව්‍යයට ඇමිණිය හැකිය jQuery(html, attributes).

JQuery 1.8 වන විට , ඕනෑම jQuery නිදර්ශන ක්‍රමයක් (ක්‍රමයක් jQuery.fn) දෙවන පරාමිතිය වෙත යොමු කරන ලද වස්තුවේ දේපලක් ලෙස භාවිතා කළ හැකිය:

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>

ගතිකව සාදන ලද මූලද්‍රව්‍ය ක්ලික් කිරීම් වලට ප්‍රතිචාර නොදක්වන්නේ එබැවිනි:

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>

විසඳුමක් ලෙස, ඔබ සියලු ක්ලික් කිරීම් වලට සවන් දිය යුතු අතර ප්‍රභව මූලද්‍රව්‍යය පරීක්ෂා කළ යුතුය:

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>

මෙය "සිදුවීම් නියෝජිත කණ්ඩායම" ලෙස හැඳින්වේ. ශුභාරංචිය, එය jQuery හි බිල්ඩින් ලක්ෂණයකි :-)

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>

සිදුවීම බැඳී ඇති මොහොතේ පවතින ඕනෑම p ස්ථානයක් නොමැති අතර ඔබේ පිටුව පන්ති නාම බොත්තම සමඟ ගතිකව මූලද්‍රව්‍ය නිර්මාණය කරන්නේ නම්, ඔබ දැනටමත් සිදුවීම දෙමාපියෙකුට බැඳ තබයි.

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

දැනටමත් පවතින දෙමව්පියන්ට සිද්ධිය බැඳ තබන්න:

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

.on()JQuery http://api.jquery.com/on/ ක්‍රමය භාවිතා කරන්නසිදුවීම් හසුරුවන්නන් සජීවී මූලද්‍රව්‍යයට ඇමිණීමට .

1.9 අනුවාදය අනුව .live()ක්‍රමය ඉවත් කරනු ලැබේ.

documentමට්ටමේ සිදුවීම් සවන්දෙන්නෙකු ස්ක්‍රිප්ට් කරනවාට වඩා සිදුවීම් සවන්දෙන්නන් මොඩියුලර් ක්‍රියාකාරීත්වයකින් යෙදවීමට මම කැමැත්තෙමි . ඉතින්, මම පහතින් කැමතියි. සටහන, ඔබට එකම සිදුවීම් සවන්දෙන්නෙකු සමඟ මූලද්‍රව්‍යයක් අධි දායකත්වයක් ලබා ගත නොහැක, එබැවින් එක් වරකට වඩා සවන්දෙන්නෙකු ඇමිණීම ගැන කරදර නොවන්න - එක් සැරයටියක් පමණි.

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
}

මූලද්‍රව්‍ය නිර්මාණය කිරීමට සහ සිදුවීම් බැඳීමට තවත් නම්‍යශීලී විසඳුමක් ( මූලාශ්‍රය )

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

මම ගතිකව එකතු කරන ලද මූලද්‍රව්‍යවල ගැටළු නොමැතිව ලබා ගැනීමට $.bindසහ $.unbindවැඩ කිරීමට විසඳුමක් සොයමින් සිටියෙමි .

ලෙස මත () මෙම උපක්රමය මා ආවේ අය මත unbind ව්යාජ නිර්මාණය කිරීම සඳහා, සිදුවීම් අනුයුක්ත කිරීමට කරයි:

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

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