Изменить содержимое тэга p с помощью jQuery

Question

Как заменить текущее содержимое p новым? Мое текущее решение не работает. Ответ возвращается, поэтому, если я помещаю одно предупреждение («Что-то») внутри функции (ответ) {}, он работает. Содержимое не заменяется, и ничего не происходит!

   $(this).find(".caption").find("#yes").live('click', function() { 
       $.ajax({ 
        url: 'prob.php', 
        data: {action: 'yes'}, 
        type: 'post', 
        success: function (response) { 
          $(this).find(".caption").find("#change").html("<p>Come on!</p>"); 
         } 
        }); 
       }); 

И это мой HTML:

    <li> 
         <a class="thumb" name="leaf" href="<?php echo $images_dir.$_SESSION['current_img'].".jpg" ?>" title="Title #0"> 
          <img src="<?php echo $images_dir.'thumbs/'.$_SESSION['current_img'].".jpg" ?>" alt='Title #0' /> 
         </a> 
         <div class="caption" id="current"> 
         <div class="image-title"> 
          <p id="change">Image shows a nautillus shell: 
           <input type="checkbox" id="yes">Yes 
           <input type="checkbox" id="no">No 
          </p> 
         </div>         
        </li> 

Answer 1

вам действительно нужно пройти по дереву DOM ли? Потому что для обоих элементов вам нужен уникальный уникальный идентификатор, который означает, что вы можете получить к ним доступ напрямую.

Here - это упрощенная js скрипка с кодом.

$(document).ready(function() { 

    $('#yes').on('click', function() { 

     $('#change').text('Come on!'); 

    }); 
}); 

Если это не возможно для вас у меня есть еще один совет, потому что другие уже упоминали проблему с $(this) в данном контексте. Я хотел бы рекомендовать вам заменить .live() с .on() потому .live() нежелателен из JQuery v1.7 и был удален в 1.9

EDIT

Я также создал fiddle где # yes и #change были изменены на классы. В этой скрипке есть 2 <li> теги и «Давай!» текст вставлен вправо <p class"change">.

Answer 2

Внутри вы Аякса успех this контекст будет Аякса, а не фактический элемент DOM, так что вы можете использовать $.proxy передать в контексте элемента внутри вашего ajax-вызов. Другое дело, что live устарел, вы можете использовать on() для делегированных обработчиков событий.

Sample Fiddle

$(this).find(".caption").find("#yes").on('click', function() { 
      $.ajax({ 
        url: 'prob.php', 
        data: {action: 'yes'}, 
        type: 'post', 
        success:$.proxy(function (response) { 
          $(this).find(".caption").find("#change").text("Come on!"); 
         },this), 
        error:$.proxy(function() 
        { 
         // 
        }, this) 
       }) 
});