Jquery Live функция щелчка не работает - PullRequest
Новая
       4

Jquery Live функция щелчка не работает

1 голос
/ 15 июля 2011

У меня проблема с живой функцией Jquery. Я добавляю данные динамически, поэтому мне нужно использовать живую функцию, чтобы щелкнуть по элементу, который добавлен динамически. 

$("a.pm_member").live("click", function(){
    alert('clicked');
});

Данные добавлены правильно. Сообщения об ошибках отсутствуют, но окно предупреждения не отображается.

Буду рад, если кто-нибудь сможет мне помочь с этой проблемой.

Edit:

Я хотел бы дать более подробную информацию.

Это то, что я использую на странице; 

<script>
new TINY.editor.edit('editor',{
    id:'tiny_input',
    height:200,
    cssclass:'te',
    controlclass:'tecontrol',
    rowclass:'teheader',
    dividerclass:'tedivider',
    controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
              'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
              'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n','image','hr','link','unlink','|','cut','copy','paste','print','|','font','size','style'],
    footer:false,
    fonts:['Arial','Verdana','Georgia','Trebuchet MS'],
    xhtml:true,
    cssfile:'style.css',
    bodyid:'editor',
    footerclass:'tefooter',
    toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggler'},
    resize:{cssclass:'resize'}
});

$('button#post').click(function () {
    editor.post();
});

$('#suggestions').hide();

function hideSuggestions () {
    $('#suggestions').hide();
}

$("a.pm_member").live("click", function(){
    alert('clicked');
});
</script>

Это система PM. Когда администратор пишет имя пользователя в области ввода получателя, скрипт предлагает несколько имен пользователей. 

<input type="text" name="userName" class="medium" maxlength="100" onkeyup="findMember(this.value);" onblur="hideSuggestions();" onfocus="findMember(this.value);"/>
<div id="suggestions"></div>

В index.php включено более 1 страницы. Я могу использовать функцию .live () без проблем на любой другой странице, но не в send-pm.php.

Я не совсем понимаю, как его отладить и как решить.

.bind (), .live (), .find () просто не работает.

Следующие элементы добавляются динамически; 

<div class="flat_area grid_8 searchresults">
<h2 class="box_head grad_colour round_top">Member Suggestions</h2>
<div class="block">
<ul class="full_width">
<li>
<strong>Username: </strong> <a href="#" id="{$found->id}" class="pm_member">{$found->username}</a><br />
<strong>Full Name: </strong> {$found->fullName}<br /> 
<strong>Email: </strong>{$email}
</li>
<li>Total <strong>{$totalRecords}</strong> records found.</li>
</ul>
</div>
</div>

Есть идеи как его отладить?

РЕДАКТИРОВАТЬ 2:

Я даже пытался добавить следующий код между элементами сразу после добавления файлов jquery и jquery ui. 

<!-- Load JQuery -->        
<script type="text/javascript" src="includes/js/jquery-1.5.1.min.js"></script>
<!-- Load JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(document).ready(function() {
    $("a.pm_member").live("click", function(){
        alert('clicked');
    });
});
</script>

Если речь идет о коде Jquery, который его тормозит, разве это не нужно исправлять (хотя я не очень хорош в Jquery).

РЕДАКТИРОВАТЬ 3:

Моя функция поиска членов 

function findMember (inputString) {
    if(inputString.length == 0) {
      $('#suggestions').fadeOut(); // Hide the suggestions box
   } else {
      $.get(siteUrl + "includes/ajax/profile.php?do=find-member", {username: ""+inputString+""}, function(data) { // Do an AJAX call
         $('#suggestions').fadeIn(); // Show the suggestions box
         $('#suggestions').html(data); // Fill the suggestions box
      });
   }
 }

Еще раз, спасибо за вашу помощь и заботу.

Ответы [ 2 ]

7 голосов
/ 15 июля 2011

Если у вас есть click обработчики на любых предков вашего "a.pm_member" элемента, которые делают return false; или event.stopPropagation(), он убьет .live().

Это потому, что .live() полностью полагается на делегирование события .

Это означает, что только те события, которые успешно всплывают из нажатого элемента, до document, могут быть проанализированы с помощью .live() и потенциально вызваны.

Если событие остановлено каким-либо предком, обработчик .live() никогда не увидит событие.

EDIT:

Это пример предка с назначенным обработчиком, который предотвращает пузыри.

Пример: http://jsfiddle.net/aBtDJ/

Удаление обработчика, заблокировавшего всплытие, заставляет обработчик .live() снова работать.

Пример: http://jsfiddle.net/aBtDJ/1/

EDIT:

Особая проблема заключается в том, что в элементе <input> есть элемент onblur="hideSuggestions()" непосредственно перед элементом #suggestions.

Похоже, это используется для удаления диалога, когда вы щелкаете в любом месте. Таким образом, событие blur происходит до click, поэтому оно никогда не регистрируется.

Не существует идеального решения этой проблемы. Независимо от того, что blur произойдет до щелчка.

Одной из возможностей может быть использование события mousedown, которое должно произойти до blur. Конечно, это не полный щелчок, но он может быть достаточно хорошим.

Я бы лично использовал .delegate() вместо .live(), но любой из них будет работать. Вот пример .delegate(): 

$('#suggestions').delegate('a.pm_member', 'mousedown', function() {
    // your code
});

Другая возможность - назначить ваш код тому же элементу ввода перед элементом suggestions. Конечно, это может вызвать в любом месте , когда вы нажмете, так что это может быть не то, что вы хотите.

0 голосов
/ 15 июля 2011

попробуйте использовать bind () вместо live (), если это не работает, я предлагаю использовать find ()

пример если parentClass является родительским классом якоря с классом pm_member

используйте это 

  $(".parentClass")find("a.pm_member").live("click", function(){
     alert('clicked');
   });

для справки по find () -> http://api.jquery.com/find/ для справки по bind () -> http://api.jquery.com/bind/

...