Почему не срабатывают динамические события?

Question

[Александр Иванов]

html:

<input type="hidden" name="category_id" id="categoryIdInput" value="<?=$id?>" />
<input type="hidden" name="adv_id" id="advertIdInput" value="<?=$AdvertData['id']?>" />
<div id="typeCategoryBlock"></div>

js:

$(function() {
    $('#categoryWrap').on('change', '.subCategory:last', function () {
        typeCategoryBlock();
    });

    $('.subCategory:last').each(function () {
        typeCategoryBlock();
    });
});

function typeCategoryBlock () {
    var $this = $(this),
        subCategory_id = $('#categoryIdInput').val();

    if(subCategory_id == '0') {
        $('#fieldsAdvert').remove();
        $('#typeCategory').remove();
        return false;
    }

    $.ajax({
        url: 'index.php?route=ajax/TypesOfCategoryList',
        data: {
            id_cat: subCategory_id
        },
        type: 'POST',
        success: function(data) {
                $('#fieldsAdvert').remove();
                $('#typeCategory').remove();
                if (data != '') {
                    var $typeDiv = $('<div id="typeCategory"><?=$text_typeAdvert?></div>');
                    var $typeSelect = $('<select name="typeCategory" id="selecttypeCategory"/>');
                    $typeSelect.append('<option value="0">- <?=$text_select?> -</option>');

                    $.map(data, function(v) {
                        if(v.id_type == <?=$AdvertData['id_type']?>) $typeSelect.append('<option value="' + v.id_type + '" selected>' + v.name + '</option>')
                        else $typeSelect.append('<option value="' + v.id_type + '">' + v.name + '</option>')
                    });

                $typeDiv.append($typeSelect);
                $('#typeCategoryBlock').html($typeDiv);
            }
        }
    });
}

как видно этот код генерирует список select уже с выбранным option, эта обработка делается во вовремя загрузки страницы вопрос: как сделать чтоб сработал второй скрипт потому что был автоматически выбран option у select, на данный момент скрипт не запускается а срабатывает только если я вручную выбираю option. код скрипта который не срабатывает:

$(function() {
    $('#selecttypeCategory').change(function () {
        var $this = $(this),
            typeCategory_id = this.value;
        alert(typeCategory_id);
        if(typeCategory_id == '0') {
            $('#fieldsAdvert').remove();
            return false;
        }

        $.ajax({
            url: 'index.php?route=ajax/getFielsCategoryListEdit',
            data: {
                id_cat: $('#categoryIdInput').val(),
                id_adv: $('#advertIdInput').val()
            },
            type: 'POST',
            success: function(data) {
                $('#fieldsAdvert').remove();
                if (data != '') {
                    var $fieldsAdvert = $('<div id="fieldsAdvert"></div>');
                    $.map(data, function(v) {
                        switch (v.type) {
                            case 'text':
                                $('<input/>', {
                                    id:     v.id_style,
                                    class:  v.class_style,
                                    type:   v.type,
                                    name:   v.name,
                                    value:  v.adverts_fields_value,
                                    placeholder:    v.placeholder
                                }).appendTo($fieldsAdvert);
                            break;
                            case 'textarea':

                            break;
                            case 'password':
                                $('<input/>', {
                                    id:     v.id_style,
                                    class:  v.class_style,
                                    type:   'password',
                                    name:   v.name,
                                    value:  v.field_value,
                                    placeholder:    v.placeholder
                                }).appendTo($fieldsAdvert);
                            break;
                            case 'select':
                                var myselect = $('<select/>', { id: v.id_style, name: v.name});
                                var items = v.field_value.split(', ');
                                //Наполняем список
                                $('<option/>', {
                                    val:  '0',
                                    text: v.placeholder
                                }).appendTo(myselect);
                                $.each(items,function() {
                                    if (this == v.adverts_fields_value) {
                                        $('<option/>', {
                                            val:  this,
                                            text: this,
                                            selected: ''
                                        }).appendTo(myselect);
                                    } else {
                                        $('<option/>', {
                                            val:  this,
                                            text: this
                                        }).appendTo(myselect);
                                    }
                                });
                                $fieldsAdvert.append(myselect);
                            break;
                            case 'time':

                            break;
                            case 'date':

                            break;
                            case 'dateTime':

                            break;
                            case 'checkBox':
                                var mycheckBoxdiv = $('<div/>', {
                                    id:     'advertCheckBox'
                                }).appendTo($fieldsAdvert);
                                var items = v.field_value.split(', ');
                                $.each(items, function(i,item) {
                                    $('<label/>').append(
                                        $('<input/>', {
                                            type: 'checkbox',
                                            name: 'mycheckbox',
                                            val:    item
                                        })
                                    ).append(item).appendTo(myradiodiv);
                                });
                            break;
                            case 'radio':
                                var myradiodiv = $('<div/>', {
                                    id:     v.id_style
                                }).appendTo($fieldsAdvert);
                                var items = v.field_value.split(', ');
                                $.each(items, function(i,item) {
                                    if(item == v.adverts_fields_value) {
                                        $('<label/>').append(
                                            $('<input/>', {
                                                type: 'radio',
                                                name: 'myradio',
                                                val:    item,
                                                checked: ''
                                            })
                                       ).append(item).appendTo(myradiodiv);
                                    } else {
                                        $('<label/>').append(
                                            $('<input/>', {
                                                type: 'radio',
                                                name: 'myradio',
                                                val:    item,
                                                checked: ''
                                            })
                                       ).append(item).appendTo(myradiodiv);
                                    }
                                });
                            break;
                            case 'hidden':

                            break;
                            default:
                                return 'Type of field not found';
                        }
                    });

                    $('#formElementsBlock').html($fieldsAdvert);
                }
            }
        });
    }).trigger('change');
});

Comments

[AngReload]

Как так получилось, что вы написали столько кода и в процессе ни разу не проверили, работает ли он вообще?
Попробуйте разделять код на функции, разделять логику и представление. Прочитайте про «минимально жизнеспособный продукт» и «разработку через тестирование».
Я не могу ни прочитать ни запустить ваш код. Для нужно знать во что должно сгенерироваться то что вы выложили. Либо простота кода, комментарии, ясный вопрос с описанием что происходит сейчас и что должно быть в итоге, текст ошибки, код на jsfiddle, хоть что-нибудь.

Answer 1

[Виктор П.]

Доброго дня!
Мне тоже лень переваривать код.
Скорее всего, замените вызовы функции on() на функцию live(), тоже из jQuery. Она может работать с динамически созданными элементами, но работает чуть медленнее, но в вашем случае не будет разницы.

Comments

[tyzberd]

начиная с версии 1,9 она удалена.
Для динамически созданных элементов нужно использовать делегирование событий
https://learn.javascript.ru/event-delegation
api.jquery.com/on

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

[Виктор П.]

tyzberd, Ого ) я так давно не залезал в jQ, спасибо за новости ))

[Игорь Забродин]

Самое главное что нужно срочно поработать над архитектурой кода т.к. очень тяжело читается (а еще похоже на JS написанный backend разработчиком). Не удивительно что не работает.

[Александр Иванов]

Игорь Забродин, да нет, писал я сам, т.к.я только ученик, поэтому и вопросы

[Игорь Забродин]

kiberchainik, тогда все нормально.
Что касается именно вопроса, то можно попробовать как и писали выше делегирование событий.
Но в целом тут нужно гораздо больше изменений. Как и писали в комментарии под вопросом нужно разделить код на функции.

Для примера код обработчика событий должен быть не сложнее этого:

$button.on('click', function(event) {
  clickHandler(event);
});

При этом если в методе clickHandler тоже предполагается какая то сложная логика (например валидация перед сабмитом формы), то и ее выделить в отдельный метод.

В частности у вас используется динамическое создание контента (всех элементов форм). Делать такое на фронте с использванием jquery не лучшая идея (наступит момент когда вы столкнетесь с тормозами). Храните всю верстку в html (в скрытом блоке если форма отображается не сразу), закешируйте все нужные элементы, динамически добавляйте/меняйте толко нужные значения и элементы.

Из кода сложно понять, но выглядит так будто у вас при каждом change на $('#selecttypeCategory') происходит ajax запрос с последующим перерендером всех элементов формы. Такого не должно быть.

Даже если и оставить текущий код, то нужно сделать хотя бы так (приблизительно):

var $selecttypeCategory = $('#selecttypeCategory');
var $fieldsAdvert = $('#fieldsAdvert');
var $categoryIdInput = $('#categoryIdInput');
var $advertIdInput = $('#advertIdInput');

function initChangeHandler() {
  $selecttypeCategory.on('change', changeHanler);
  $selecttypeCategory.trigger('change');
}

function changeHandler(event) {
  var $this = $(this),
      typeCategory_id = this.value;

  alert(typeCategory_id);

  if(typeCategory_id === '0') {
    $fieldsAdvert.remove();
    return false;
  }
  
  fetchData();
}

function fetchData() {
  $.ajax({
    url: 'index.php?route=ajax/getFielsCategoryListEdit',
    data: {
      id_cat: $categoryIdInput.val(),
      id_adv: $advertIdInput.val()
    },
    type: 'POST',
    success: function(data) {
      updateData(data);
    }
  });
}

function updateData(data) {
  $fieldsAdvert.remove();
  if (data != '') {
    var $newFieldsAdvert = $('<div id="fieldsAdvert"></div>');
    $.map(data, function(v) {
      switch (v.type) {
        case 'text':
          updateTextInputVal(v);
          break;
          
        case 'password':
          updatePasswordVal(v);
          break;
          
        case 'select':
          renderSelectOptions(v);
          break;

        case 'checkBox':
          updateCheckboxes(v);
          break;
        
        case 'radio':
          updateRadioInputs(v)
          break;
          
        case 'textarea':
        case 'time':
        case 'date':
        case 'dateTime':
        case 'hidden':
          break;
          
        default:
          return 'Type of field not found';
      }
    });

    $('#formElementsBlock').html($newFieldsAdvert);
  }
}
 
$(function() {
  initChangeHandler();
});

[Александр Иванов]

Игорь Забродин, спасибо за столь развернутый ответ, мне такого не хватало. А объясню почему код написан так, дело в том что динамически у меня на странице генерируются от 2х до 4х select с данными из базы от этого и ajax, после этого в зависимости от комбинаций option в select'ах генерируются необходимые поля с или без значений, через switch ... case, а данные полей, название тип значение плейсхолдер класс ид беру тоже из базы, чтоб не плодить заготовки html да и получается так более динамично, чем подгружать html я просто через админку создаю поля которые необходимы той или иной категории.