অ্যাজাক্স লোড করা সামগ্রীতে ইভেন্টগুলি কীভাবে আবদ্ধ করবেন?

Question 1

আমার একটি লিঙ্ক আছে myLink, এটি divআমার এইচটিএমএল পৃষ্ঠার একটি (অ্যাপেনডকন্টেইনার) এজেএক্স-লোডযুক্ত সামগ্রী প্রবেশ করানো উচিত । সমস্যাটি হ'ল clickআমি jQuery এর সাথে আবদ্ধ হওয়া ইভেন্টটি নতুন লোড হওয়া সামগ্রীতে প্রয়োগ করা হচ্ছে না যা অ্যাপেনডকন্টেইনারটিতে .োকানো হয়েছে। clickঘটনা DOM উপাদানে যে আমার AJAX ফাংশন লোড করা হয় আবদ্ধ হয়।

আমার কী পরিবর্তন করতে হবে, যাতে ইভেন্টটি আবদ্ধ হবে?

আমার এইচটিএমএল:

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

আমার জাভাস্ক্রিপ্ট:

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

সামগ্রী লোড করা হবে:

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

Question 2

গতিশীলভাবে তৈরি উপাদানগুলির জন্য ইভেন্ট প্রতিনিধি ব্যবহার করুন:

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

এটি আসলে কাজ করে, এখানে একটি উদাহরণ যেখানে আমি বর্গ সঙ্গে একটি নোঙ্গর যোগ করেন .mylinkপরিবর্তে data- http://jsfiddle.net/EFjzG/

Question 3

.On () বলা হওয়ার পরে যদি সামগ্রীটি সংযোজন করা হয় তবে আপনার বোঝা সামগ্রীর পিতামণ্ডলের একটি প্রতিনিধি ইভেন্ট তৈরি করতে হবে। কারণ এটি ইভেন্ট হ্যান্ডলারগুলি আবদ্ধ যখন .on () বলা হয় (অর্থাত্ সাধারণত পৃষ্ঠা লোডে)। .On () বলা হওয়ার পরে যদি উপাদানটি উপস্থিত না থাকে, ইভেন্টটি এর সাথে আবদ্ধ হবে না!

যেহেতু ইভেন্টগুলি ডিওএম এর মাধ্যমে প্রচার করে, আমরা কোনও প্যারেন্ট উপাদানটির উপর একটি ডেলিগেটেড ইভেন্ট তৈরি করে সমাধান করতে পারি ( .parent-elementনীচের উদাহরণে) যে পৃষ্ঠাটি লোড হওয়ার পরে আমরা জানি exists এখানে কীভাবে:

$('.parent-element').on('click', '.mylink', function(){
  alert ("new link clicked!");
})

এই বিষয়ে আরও কিছু পড়া:

Question 4

যদি আপনার প্রশ্নটি হয় "কীভাবে এজ্যাক লোড সামগ্রীগুলিতে ইভেন্টগুলি আবদ্ধ করতে হয়" আপনি এইভাবে করতে পারেন:

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

সুতরাং আপনার প্রত্যেকটি এজাক্স কোডে আপনার কনফিগারেশন স্থাপন করার দরকার নেই

Question 5

JQuery 1.7 হিসাবে, .live()পদ্ধতিটি অবচয় করা হয়েছে। .on()ইভেন্ট হ্যান্ডলার সংযুক্ত করতে ব্যবহার করুন ।

উদাহরণ -

$( document ).on( events, selector, data, handler );

Question 6

যারা এখনও সমাধানের সন্ধান করছেন তাদের পক্ষে এটি করার সর্বোত্তম উপায় হ'ল ঘটনাটি নথিতে নিজেই আবদ্ধ করা এবং ইভেন্টটির সাথে "প্রস্তুত থাকা" আবদ্ধ না করা যেমন:

$(function ajaxform_reload() {
$(document).on("submit", ".ajax_forms", function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    $.ajax({
        type: 'post',
        url: url,
        data: $(this).serialize(),
        success: function (data) {
            // DO WHAT YOU WANT WITH THE RESPONSE
        }
    });
});

});

Question 7

যদি আপনার এজাক্স প্রতিক্রিয়াতে এইচটিএমএল ফর্ম ইনপুট থাকে উদাহরণস্বরূপ, এর চেয়ে দুর্দান্ত হবে:

$(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) { 
if (this.value == 'Yes') {
  // do something here
} else if (this.value == 'No') {
  // do something else here.
} else {
   console.log('The new input field from an ajax response has this value: '+ this.value);
}

});

Question 8

পরিবর্তে jQuery.live () ব্যবহার করুন। ডকুমেন্টেশন এখানে

যেমন

$("mylink").live("click", function(event) { alert("new link clicked!");});

Question 9

এএসপি.নেটের জন্য এটি ব্যবহার করে দেখুন:

<script type="text/javascript">
    Sys.Application.add_load(function() { ... });
</script>

এটি পৃষ্ঠা লোড এবং আপডেট প্যানেল লোডে কাজ করে বলে মনে হচ্ছে

এখানে সম্পূর্ণ আলোচনা সন্ধান করুন ।