변경 이벤트를 만드는 방법 한 번만 실행되는 이벤트는 수업을 요구합니다.

Question

나는 멀티 동적 선택 메뉴를 설계하고 있습니다. 즉, 브랜드 메뉴가 있습니다. 사용자가 JavaScript 및 Ajax를 사용하여 브랜드를 선택한 후 해당 브랜드에서 사용 가능한 모델을 검색하여 두 번째 선택 메뉴에 추가합니다. 이 프로세스는 다시 반복되지만 이번에는 선택된 모델의 기능을 보여줍니다.

이를 위해, 동일한 시스템이 필요한 여러 영역이 있기 때문에 모든 브랜드 선택 메뉴에서 동일한 이름을 가진 클래스를 사용하고 다른 하나는 모든 모델 선택 메뉴를 사용합니다.

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

이 코드는 작동하지만 이벤트는 해당 이름의 클래스와 동일한 횟수로 변경됩니다.

내가하고 싶은 것은 기능이 클래스에 대한 변경 이벤트가 요구 될 때마다 한 번만 실행하는 것입니다.

이것이 내가 가지고있는 클래스 구조로 이것이 가능하거나 각 영역에 대해 다른 이름을 가진 ID 또는 클래스를 기능에 연결 해야하는지 모르겠습니다.

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 (). parent ()). 최선의 방법이 아닌 해고당했습니다 (그러나 다시 당신의 최종 목적이 무엇인지 모르겠습니다).