Ошибка при наведении на элементы, заполненные ajax load или get function - PullRequest
Новая
       12

Ошибка при наведении на элементы, заполненные ajax load или get function

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

У меня проблема с функцией наведения в FF и Chrome.У меня есть таблица, которая динамически заполняется через AJAX.Затем я пытаюсь манипулировать элементами, отправляемыми через ajax, но это не работает в FF и Chrome.Вот код страницы: 

/** My page**/
$('#resourcelist tbody').load(inc_processplugin.asp?cmd=select&tc=listresource,function () {
             $('#divShowAddResource').hide();
      });

 $('.editable')
        .hover(function () {
            //alert('Am hovering');
            //change background of an editable element if mouse hover
            $(this).toggleClass('over-inline');
        })


/** The elements editable is the one that populate the tbody above. It's generated dynamically from inc_processplugin.asp Here is part of the incprocessplugin.asp that populate the tbody element**/

query = "SELECT * from t_cmsix_tc_resource WHERE isnull(resource_inactive,0)=0"
        objRs.Open query, objConn   
         Do while Not objRs.EOF     
            Response.Write("<tr>" & vbCrlf)          
            Response.Write("<td><span class=""editable"" id=""" & objRs("resource_id")  & """>" & objRs("resource_name") & "</span></td>" & vbCrlf) 
            Response.Write("</tr>" & vbCrlf) 
            objRs.MoveNext    
         Loop `

Элемент tbody заполнен правильно, но hover или любые другие действия с динамически генерируемыми элементами .editable не работают.помогите пожалуйста ????

Ответы [ 4 ]

2 голосов
/ 27 июля 2011

Вы также можете использовать $ .fn.live ()

http://api.jquery.com/live/

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

Обновление Следует также отметить, что другим подходящим решением является: 

$.fn.delegate()

http://api.jquery.com/delegate/

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

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

Я полагаю, что ваш ховер установлен до того, как ajax завершит загрузку.Попробуйте поместить функцию .hover () в $ (document) .ready (function () {});

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

попробуйте запустить код jQuery в обработчике событий $ (document) .ready ().Эти элементы td могут не существовать, когда вы присоединяете обработчик события hover, и поэтому он не работает.

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

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

После любого вызова ajax вы должны повторно вызвать функцию наведения на элементах 

    $('#resourcelist tbody').load(inc_processplugin.asp?cmd=select&tc=listresource,function () {
         $('#divShowAddResource').hide();
         $('.editable').hover(function () {
             $(this).toggleClass('over-inline');
         })
    })

  });
...