كيفية إجراء حدث تغيير يعمل مرة واحدة فقط ، يتم استدعاء الحدث لفصل

Question

أقوم بتصميم قوائم محددة ديناميكية متعددة ، أي ، لدي قائمة للعلامات التجارية ، بعد أن حدد المستخدم العلامة التجارية ، باستخدام JavaScript و Ajax ، سأبحث عن النماذج المتاحة من تلك العلامة التجارية وإضافتها إلى قائمة Second Select. تتكرر هذه العملية مرة أخرى ولكن هذه المرة توضح ميزات النموذج المحدد.

للقيام بذلك ، ولأن لدي العديد من المجالات المختلفة التي تحتاج إلى نفس النظام ، أستخدم فئة تحمل نفس الاسم في كل قائمة Select Select و Onefer One To Clo Select Select.

  <div class='brand_select' id='14'>
    <%= f.collection_select :brand, Product.find_all_by_area(14, :group => 'brand'), :brand, :brand, :prompt => 'Choose brand' %>
  </div>
  <div class='model_select'>
     <%= f.collection_select :model, Product.find_all_by_area(14), :model, :model, :prompt => 'Choose model' %> 
  </div>

  <div class='brand_select' id='15'>
    <%= f.collection_select :brand, Product.find_all_by_area(15, :group => 'brand'), :brand, :brand, :prompt => 'Choose brand' %>
  </div>
  <div class='model_select'>
     <%= f.collection_select :model, Product.find_all_by_area(15), :model, :model, :prompt => 'Choose model' %> 
  </div>

و Javacript:

$('.brand_select').change(function(event) {
    // option selected
    var brand=$(event.target).find('option:selected').val();

    // if none is selected
    if (brand == ''){
            $(event.target).parent().parent().find('.modelo_select').hide();
            $(event.target).parent().parent().find('.caracteristica').hide();
        }
    else {
        $(event.target).parent().parent().find('.modelo_select').show();
        // find id to search on the database
        var id=$(event.target).parent().attr('id');
        // find the target (id of the object)
        var target=$(event.target).attr('id');

        $.ajax({
            type: "POST",
            url: "http://"+location.host+"/model/"+brand+"/"+id+"/"+target,
            brand: brand,
            id: id,
            target: target
        });
    }  
});

$('.model_select').change(function(event) {
        // find model selected to search on the database
        var model=$(event.target).find('option:selected').val();
        // find brand selected to search on the database
        var brand=$(event.target).parent().parent().find('.marca_select').find('option:selected').val();
        // find id to search on the database
        var id=$(event.target).parent().parent().find('.marca_select').attr('id');
        // find the target (id of the object)
        var target=$(event.target).attr('id');

        $.ajax({
            type: "POST",
            url: "http://"+location.host+"/feature/"+brand+"/"+model+"/"+id+"/"+target,
            brand: brand,
            model: model,
            id: id,
            target: target
        });
});

يعمل هذا الرمز ولكنه يكرر الحدث تغيير نفس عدد مرات الفئات التي تحمل هذا الاسم.

ما أريد القيام به هو أن يتم تشغيل الوظيفة مرة واحدة فقط في كل مرة يتم فيها استدعاء حدث تغيير للفصل.

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

Answer 1

هذا لمساعدتك ، اكتشفت أن المشكلة لا علاقة لها بـ JavaScript ولكن بدلاً من ذلك على Ruby on Rails.

كنت أضيف على application.html.erb ملفات JS الأخرى وإذا كان لديك //= require_tree على ال application.js يضيف كل ملف JS في الشجرة ، لذا إضافة ملفات JS على application.html.erb سيجعلهم يتكررون ويسببون سلوكيات غريبة مثل هذا.

Answer 2

لا أرى لماذا يجب أن يطلق هذا الحدث مرتين لأن كل ما تفعله مع $ (محدد). Change يقول أنه في كل مرة يطلق فيها حدث تغيير على شيء مع هذا المحدد الذي تريد التعامل معه. حتى أنني أجريت اختبارًا سريعًا للتأكد من أنه لا يطلق النار أكثر من مرة.

هل يمكن أن تشرح بشكل أفضل قليلاً ما هو الأعراض في الواقع؟ كما في ، ماذا يحدث بالفعل مرتين؟ هل يحدث كل شيء في معالج الحدث مرتين؟

كنت أفكر في أن محدداتك على الإجراءات التي تقوم بها على الوالدين قد تكون متساهلة بعض الشيء ($ (event.target) .Parent (). تم إطلاق النار ، لن يكون هذا هو أفضل طريقة (ولكن مرة أخرى لا أعرف ما هو الغرض النهائي الخاص بك هنا).