Jquery код не работает!

Question

У меня есть следующий скрипт ----

  $("tr.member_profile_comment_row_frame").mouseover(function () {
     $(this.element."img.member_profile_comment_show_delete_button").show();
  });
  $("tr.member_profile_comment_row_frame").mouseout(function () {
     $(this.element."img.member_profile_comment_show_delete_button").hide();
  });

Я хочу, чтобы в строке таблицы был элемент, указанный в классе member_profile_comment_show_delete_button должен отображаться и скрываться при наведении мыши и наведении указателя мыши на строку таблицы! Но есть много строк таблицы, как это! И я не могу найти способ отображения только того img в строке таблицы, на которую наведена мышь!

Пожалуйста, помогите мне!

Заранее спасибо!

Answer 1

Вам не нужен этот элемент в вашем коде, только селектор;this впоследствии означает заглянуть внутрь этого элемента.

 $("tr.member_profile_comment_row_frame").mouseover(function () {
     $("img.member_profile_comment_show_delete_button", this).show();
 });
 $("tr.member_profile_comment_row_frame").mouseout(function () {
     $("img.member_profile_comment_show_delete_button", this).hide();
 });

Answer 2

Вы должны использовать .delegate() ^помощь здесь. Похоже:

$('table').delegate('tr', 'mouseenter', function(e) {
    $(this).find('img.member_profile_comment_show_delete_button').show();
}).delegate('tr', 'mouseleave', function(e) {
    $(this).find('img.member_profile_comment_show_delete_button').hide();
});

Это имеет то преимущество, что только один обработчик событий привязан ко всем вашим <tr> узлам (к вашему <table> узлу).

Ваш текущий код также должен работать (помимо этого this.element должен быть заменен на this), но он будет привязывать обработчик событий к каждому <tr> явно.