Javascript Динамическая обработка событий, а не Jquery - PullRequest
Новая
       31

Javascript Динамическая обработка событий, а не Jquery

2 голосов
/ 10 марта 2012

вот мой код 

<html>
    <head>
    <script type="text/javascript">
    window.onload = function(){
        sel = document.getElementsByTagName('select');
        for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');}
    }
    </script>
    </head>
    <body>
    <div id="ss"></div>
    <select></select>
    <input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'))"/>

    </body>
</html>

Событие «onclick» работает для статического тега «Выбор», но не работает для динамически создаваемого «Выбор».Другими словами, я хочу знать, что является альтернативой .live из JQuery в Javascript.

Ответы [ 5 ]

6 голосов
/ 10 марта 2012

Привязать событие к родительскому элементу, который уже существует в DOM: 

document.body.addEventListener('click', function (e) {
  if (e.target.tagName.toLowerCase() == 'select') {
    alert('You clicked a select!');
  }
});

JS Fiddle demo .

Это было бы немного более разумно дляпривязать щелчок к элементу «ближе» к form, и если вы используете getElementById() вместо getElementByTagName(), это проще, так как вам не нужно беспокоиться об индексе числа, к которому вы привязываете.

3 голосов
/ 11 марта 2012

Функция live jQuery работает с использованием « Event Delegation ». Основная идея заключается в том, что вы привязываете слушателя к родительскому элементу, который гарантированно будет существовать при загрузке страницы. Любой элемент ниже этого (, за исключением некоторых ) вызовет событие, которое может быть перехвачено родительским слушателем. Оттуда вам нужно будет извлечь target / sourceElement события и определить, действительно ли это то, что вам нужно.

Примерно так будет работать для прослушивания щелчков. Просто убедитесь, что все новые элементы, которые вы добавляете, находятся в соответствующем родительском контейнере и имеют атрибут, который отличает их от остальных интерактивных элементов. 

<html>
<head>
    <script type="text/javascript">
        window.onload = function(){
            // get the relevant container
            var eventContainer = document.getElementById("EventContainer");

            // bind a click listener to that container
            eventContainer.onclick = function(e){

                // get the event
                e = e || window.event;

                // get the target
                var target = e.target || e.srcElement;

                // should we listen to the click on this element?
                if(target.getAttribute("rel") == 'click-listen')
                {
                    alert("You clicked something you are listening to!");
                }// if
            };
        };
    </script>
</head>
<body>
<div id="EventContainer">
    <input type="button" rel="click-listen" name="myButton" value="Listening to this button." />
    <input type="button" name="anotherButton" value="Not listening." />
    <p>I'm also listening to this a element: <a href="#" rel="click-listen">listening to this</a></p>
</div>
</body>
</html>
3 голосов
/ 11 марта 2012

нет необходимости связывать обработчик onclick с каждым выбором каждый раз, когда вы добавляете его.

Я не собираюсь перепечатывать всю вашу страницу, но вы увидите, что происходит, прочитав следующие фрагменты: 

function handler() {
    alert('You clicked a select!');
}

window.onload = function(){
    sel = document.getElementsByTagName('select');
    for(int i= 0; i < sel.length; i++) {
        sel[i].onclick = handler;
    }
}

function addSelect() {
    var slt = document.createElement("select");
    document.getElementById('ss').appendChild(slt);
    slt.onclick = handler;
}

<input type="button" onclick="addSelect();"/>
1 голос
/ 10 марта 2012

Вы устанавливаете клик только тогда, когда окно загружается. Все, что вам нужно сделать, это поместить код, находящийся в данный момент в window.onload, в именованную функцию, а затем вызывать его каждый раз, когда вы добавляете новый выбор.

вот глупый способ сделать это: 

<html>
    <head>
    <script type="text/javascript">

    function update () {
        sel = document.getElementsByTagName('select');
        for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');}
    }
    window.onload = update;

    </script>
    </head>
    <body>
    <div id="ss"></div>
    <select></select>
    <input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'));update();"/>

    </body>
</html>
0 голосов
/ 11 марта 2012

Вы можете использовать кросс-браузерное решение, как показано ниже, для динамического добавления обработчика событий 

sel = document.getElementsByTagName('select');
for( i=0; i<sel.length; i++){
    if (sel[i].addEventListener){
        sel[i].addEventListener("click", clickHandler, false);
    } else if (sel[i].attachEvent){
        sel[i].attachEvent("onclick", clickHandler);
    }else{
        sel[i].onclick = clickHandler;
    }
}

function clickHandler(event){

}
...