Ruby on Rails - JavaScript в динамически сгенерированных партитурах

Question

Я знаю, что использование JavaScript в партитурах - плохая идея, потому что страница будет загружать новый скрипт каждый раз, когда загружается новая частичная. Я знаю и прочитал this question, но его ответ не сработал для меня (установка скрипта в приложение/javascripts/application.js). Я думаю, что это потому, что я работаю с частицами, которые динамически генерируются на странице. Я думаю, что динамически генерируемая частица не реагирует на сценарий, загруженный на начальную страницу.

Например, у меня есть «Rule» div с входом выбора, который имеет скрипт, чтобы что-то делать, когда изменяется вход выбора. Это работает для каждого Rule div, создаваемого при загрузке страницы. Но тогда есть также кнопка «+» или «ДОБАВИТЬ», которая будет динамически генерировать больше разделов Rule, которые не отвечают на сценарий, если только этот скрипт не находится в частичном.

Есть ли хороший способ сохранить сценарий из частичного, если частичная динамическая генерация?

Answer 1

JQuery наборы слушателей на странице загрузки (т.е. $(selector).on(etc.)), поэтому он не слушает событий на динамически добавляемых элементов. Однако есть способ обойти это. Вам нужно использовать то, что называется делегатом.

$(document).ready(function() { 
    $('body').on('change', 'input.selector', function(e) { 
     // do something 
    }); 
}); 

Я не уверен, что ваше мероприятие (здесь я ставлю change) или селектор для выбора вы используете (здесь я ставлю input.selector), но если заменить те, с соответствующей информацией, он должен работать даже с динамически добавленными элементами.

Answer 2

Вы можете использовать JQuery, чтобы выполнить код только после того, как документ загружен на DOM:

$(document).ready(function() { 
    //Call your functions here 
}); 

Таким образом, ваш JS будет иметь доступ к все, что на странице, потому что вы обеспечиваете что это полностью загружена.

Если ваши блоки не установлены на готовом документе, вы можете использовать делегирование событий, как это было предложено ptd. В основном это означает, что вы устанавливаете обработчик в родительском div (который будет присутствовать в готовом документе), который гласит: «Эй, когда вы нажимаете на этот динамический div внутри меня, вызывайте эту функцию».

$('div#master').on('click', 'div.dynamic', function(event) { 
    console.log("action here") 
    var $dynamicDiv = $(event.currentTarget) //The current Target is the thing you clicked on, not the parent. 
});