Блог

Главная - Вопросы по программированию - jQuery эквивалентен `return document.getElementById(theVar)’

jQuery эквивалентен `return document.getElementById(theVar)’

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть функция javascript

 function $m(theVar){
    return document.getElementById(theVar)
}

Проблема с приведенным выше кодом в том, что элемент, который я хочу передать, генерируется ajax, поэтому мне нужно что-то вроде .live() в jquery, если только это не выдает ошибку

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

Обновить:

При первой загрузке моей страницы она загружается

1) ajaxupload.js с кодами 

 function ajaxUpload(form,url_action,msg){
   var id_element= "pop-con";
   function $m(theVar){
        return document.getElementById(theVar)
    }
   if($m(id_element)==null){
        erro  = "The element of 3rd parameter does not exists.n";
    }
}

2) index.php с кодами

 <div id="popupMargin">
    <div class="close">x</div>
    <div id="pop-con"></div>
</div>
<div id="ajaxGenerateMarkUp"></div>

3) теперь при нажатии кнопки в #ajaxGeneratedmarkUp div добавляется следующая разметка (разметка, сгенерированная с помощью ajax)

 <form  onSubmit="return disableForm(this);" action="crop/wizecho_upload.php" method="post" name="f" id="wizecho" enctype="multipart/form-data">
      <input id="file" type="file" name="file"  onChange="return disableForm(this), ajaxUpload(this.form,'crop/wizecho_upload.php', 'amp;<bramp;>Uploading image please wait.....amp;<bramp;>'); return false;"/>
</form>

Теперь при изменении этого файла типа ввода был выполнен вызов в javascript. Теперь он показывает ошибку.

[Примечание: Я опубликовал только разделы кода, которые, как я думаю, могут повлиять на мой вопрос]

Комментарии:

1. Ваша функция будет работать нормально, пока элемент существует на момент вызова вашей функции. Другими словами, ваша функция очень похожа .live() . Или, может быть, вы хотите, чтобы функция возвращала ссылку на элемент, который будет создан в будущем?? Я не уверен, что понимаю вопрос.

2. Приведенная выше функция и элемент, на который здесь ссылается theVar , загружаются при загрузке страницы. Нажатие кнопки где-нибудь на странице генерирует <div> с помощью ajax вторую кнопку внутри нее. Я нажимаю на вторую кнопку и вызываю эту функцию, но функция возвращает null

3. theVar не должен содержать элемент. Это должна быть строка. Пожалуйста, опубликуйте больше вашего кода. Но если вы все равно используете jQuery, то используйте его.

Ответ №1:

Вот так:

 return $('#'   theVar)[0];

Ответ №2:

Селектор jQuery может обнаруживать вновь созданные элементы:

 $('#id');

Итак, в вашем случае:

 var theVar = 'something';
$('#'   theVar); //returns a jQuery object of the select item
$('#'   theVar)[0]; //returns the first DOM object that jQuery finds with that id

Комментарии:

1. итак, я пишу return $('#' theVar); ?? Похоже, это не работает

2. тогда дайте нам еще немного контекста, потому что это действительно работает. И я хочу сказать, что вам не нужна функция, потому что она уже встроена в jQuery.

3. ваш пример возвращает объект jQuery, а не объект DOM, поэтому он не эквивалентен return document.getElementById(theVar)

4. @jessegavin Я понимаю, что он сказал, что хочет переписать его в jQuery, я пропустил ту часть, где он сказал, что хочет по-прежнему использовать объект DOM. Редактировать: изменен основной пост, чтобы включить также возврат объекта DOM.

5. обратите внимание, что это приведет к сбою, если theVar содержать специальные символы типа . , которые должны быть экранированы в CSS-селекторе. например $('#a\.b')[0] === document.getElementById('a.b')

Ответ №3:

Я думаю, вам нужно добавить live вызов где-нибудь, чтобы обнаружить новую кнопку, загруженную AJAX. Таким образом, кнопка будет автоматически привязана к обработчику, который работает нормально, как и в других ответах. Из вашего комментария я предполагаю, что вы делаете одно из этих:

  • В загружаемой AJAX кнопке вы уже включили некоторую логику JS, которая не работает (что-то вроде onclick="do_something" ).
  • Вы привязываете вторую кнопку к обработчику с помощью live метода.

Вот рабочий пример. Хотя он не загружает содержимое через AJAX, он загружает динамическую кнопку.

http://jsfiddle.net/marcosfromero/VKfKL/

Обновление: Другой пример, который загружает содержимое через AJAX и связывает вновь созданную кнопку с live :

http://jsfiddle.net/marcosfromero/h9RSC/