Это проблема, если я помещу jQuery, который будет использоваться после того, как определенный HTML введен в DOM в $ ('document'). Ready ()? - PullRequest
Новая
       3

Это проблема, если я помещу jQuery, который будет использоваться после того, как определенный HTML введен в DOM в $ ('document'). Ready ()?

1 голос
/ 24 ноября 2010

У меня есть функция jQuery, которая при нажатии на определенную кнопку удаляет определенный HTML.Этот HTML не существует в DOM, пока не будет нажата другая кнопка.Кнопка, при нажатии которой удаляется HTML-код, не существует, пока не будет нажата другая кнопка, а при нажатии она сама удалится.Есть ли проблема с этим в функции $ ('document'). Ready ()?Если нет, то где это должно быть.

Почему я спрашиваю, потому что я знаю, что я как-то вызвал ошибку с этой функцией, но не могу понять где.Если у вас есть другие идеи, это было бы очень полезно.

Вот код: 

<div id="popups">
    <div id="createform">
        <div id="createformInside">
            <input type="text" id="testTitle" size="20">
            <input type="text" id="testSubj">
            <span id="testOptions">More Options</span>
            <br/>
            <textarea id="testContent" ></textarea>
            <input type="button" value="Save Test" id="saveBttn">
        </div>
     </div>
</div>

$('#saveBttn').click( function() {//if the save button on the create test form is clicked...
    $('#createform').remove();//gets rid of the create test form
})

Полный код здесь, если это поможет: http://jsfiddle.net/chromedude/ggJ4d/

Ответы [ 3 ]

2 голосов
/ 24 ноября 2010

Ваша проблема связана с тем, что элемент html input, с которым вы связываете обработчик кликов, не существует, когда документ готов. Это означает, что он не существует, когда создается ваш обработчик .click(). Чтобы привязать обработчики к элементам, которые существуют сейчас и в будущем, вы можете использовать .live() или .delegate(). Я предпочитаю последнее, потому что оно не привязывается к document и не ожидает появления событий, вместо этого оно привязывается к селектору, который вы передаете, и отслеживает только всплывающие события, которые запускаются в этом конкретном элементе.

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

$('#popups').delegate("#saveBttn", "click", function() {//if the save button on the create test form is clicked...
    $('#createform').remove();//gets rid of the create test form
});
2 голосов
/ 24 ноября 2010

Используйте live вместо click, как вы это делаете во время выполнения

Live будет использоваться для будущих ссылочных элементов dom. 

$('#saveBttn').live('click', function() {

});
0 голосов
/ 24 ноября 2010

Вы, вероятно, должны поместить код в .click() кнопки, которая генерирует HTML.

Кстати, вам нужно закрыть теги input, например ::10000 * 

<input type="text" id="testSubj"/>

вместо: 

<input type="text" id="testSubj">

На основе вашего jsfiddle (http://jsfiddle.net/chromedude/ggJ4d/), что-то вроде этого должно работать: 

$('#new').click( function() {//if a new test is wanted to be created...
    $('#popups').append($formHtml);

    $('#saveBttn').click( function() {//if the save button on the create test form is clicked...
        $('#createform').empty();//gets rid of the create test form
    })
})
...