it-swarm.dev

$ (المستند). على ("انقر فوق" ... لا تعمل؟

هل هناك خطأ معروف يمكن أن أقوم به هنا؟

لدي برنامج نصي يستخدم .on () لأنه يتم إنشاء عنصر ديناميكيًا ، وهو لا يعمل. لمجرد اختباره ، استبدلت المحدد بلف العنصر الديناميكي ، وهو ثابت ، وما زال لا يعمل! عندما تحولت إلى عادي قديم. انقر على التفاف أنها تعمل ، على الرغم من.
(هذا لن ينجح بشكل واضح للعنصر الديناميكي ، العنصر المهم.)

هذا يعمل:

$("#test-element").click(function() {
    alert("click");
});

هذا لا:

$(document).on("click","#test-element",function() {
    alert("click");
});

تحديث:

لقد نقرت بزر الماوس الأيمن وقمت بـ "فحص العنصر" في Chrome لمجرد التحقق من شيء ما ، ثم نجح حدث النقر. لقد قمت بالانتعاش ولم تنجح ، وفحص العنصر ، ثم نجحت. ماذا يعني هذا؟

68
Mr. Lavalamp

إنك تستخدم بناء الجملة الصحيح للربط بالمستند للاستماع إلى حدث نقرة لعنصر ذي id = "test-element".

ربما لا تعمل بسبب أحد:

  • عدم استخدام الإصدار الأخير من مسج
  • عدم التفاف الكود الخاص بك داخل DOM جاهز
  • أو تفعل شيئًا يؤدي إلى عدم ظهور الحدث في المستمع الموجود بالمستند.

لالتقاط الأحداث على العناصر التي تم إنشاؤهابعدالإعلان عن مستمعي الحدث - يجب عليك ربط عنصر أصل أو عنصر أعلى في التسلسل الهرمي.

فمثلا:

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

في هذا المثال ، سيتم إطلاق التنبيه "منضم إلى المستند" فقط.

JSFiddle with jQuery 1.9.1

126
itsmejodie

يجب أن يعمل الرمز الخاص بك ، لكنني أدرك أن الإجابة لا تساعدك. تستطيع أن ترى مثالا يعمل هنا (jsfiddle) .

مسج:

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

كما أشار أحدهم بالفعل ، فأنت تستخدم معرفًا بدلاً من الفصل الدراسي. إذا كان لديك أكثر من عنصر واحد في الصفحة يحمل معرفًا ، فسوف تُرجع jquery العنصر الأول فقط بهذا المعرف . لن يكون هناك أي أخطاء لأن هذا هو كيف يعمل. إذا كانت هذه هي المشكلة ، فستلاحظ أن حدث النقرات يعمل لأول test-element ولكن ليس لأي متابع.

إذا لم يصف ذلك أعراض المشكلة بدقة ، فربما يكون محددك خاطئًا. يقودني تحديثك إلى الاعتقاد بأن هذا هو الحال بسبب فحص أحد العناصر ثم النقر فوق الصفحة مرة أخرى وتشغيل النقر. ما يمكن أن يسبب هذا هو إذا وضعت المستمع الحدث على document الفعلي بدلاً من test-element. إذا كان الأمر كذلك ، فعند النقر فوق إيقاف تشغيل المستند والعودة (مثل من نافذة المطور إلى المستند) ، سيتم تشغيل الحدث. إذا كانت هذه هي الحالة ، فستلاحظ أيضًا أن حدث النقر يتم تشغيله إذا نقرت بين علامتي تبويب مختلفتين (لأنهما مختلفتان documents وبالتالي تنقران على المستند).

إذا لم يكن أي من هذين الحلين ، فسيؤدي نشر HTML إلى قطع شوط طويل نحو اكتشافه.

9
smilebomb

منشور قديم ، لكني أحب أن أشاركه لدي نفس الحالة ولكني في النهاية عرفت المشكلة:

المشكلة هي: نحن نجعل وظيفة للعمل مع عنصر HTML المحدد ، ولكن لم يتم إنشاء عنصر HTML المرتبط بهذه الوظيفة بعد (لأنه تم إنشاء العنصر ديناميكيًا). لجعلها تعمل ، يجب أن نجعل الوظيفة في نفس الوقت الذي ننشئ فيه العنصر. العنصر الأول من جعل الوظيفة المتعلقة به.

ببساطة Word ، ستعمل الوظيفة فقط على العنصر الذي تم إنشاؤه قبله (هو). أي العناصر التي خلقت بشكل حيوي يعني بعده.

ولكن يرجى فحص هذه العينة التي لم تلتفت إلى الحالة المذكورة أعلاه:

<div class="btn-list" id="selected-country"></div>

ملحق ديناميكي:

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

هذه الوظيفة تعمل بشكل جيد عن طريق النقر فوق الزر:

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

أو يمكنك استخدام الجسم مثل:

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

قارن مع هذا الذي لا يعمل:

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

آمل أن يساعد

4
Sulung Nugroho

هذا يعمل:

<div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

هنا هو Fiddle

2
iGanja

جرب هذا:

$("#test-element").on("click" ,function() {
    alert("click");
});

طريقة المستند للقيام بذلك غريبة جداً. قد يكون ذلك منطقيًا إذا تم استخدامه لأحد محددات الفصل الدراسي ، ولكن في حالة وجود معرّف ، ربما يكون لديك DOM عديمة الفائدة تعبر هناك. في حالة محدد الهوية ، تحصل على هذا العنصر على الفور.

2
Eduárd Moldován