Question

我有这个按钮，当点击它时，它会发送一个更改score_up值的ajax调用。

我看不出问题所在。我试过了冷杉，但显然它甚至没有检测到javscript？ :)）谢谢。

jquery的：

$('.stats').delegate('.support', 'click', function(e) {

      //stop event
      e.preventDefault();
      //get the id
       var the_id = $(this).closest('.score').attr('id').split('_').pop();
        //the main ajax request
       $.ajax({
           context:this,
           type: "POST",
           data: "action=support&id=" + the_id,
           url: "ajax/sa.php",
          success: function (msg) {

               $(this).siblings("h2.score_up").html(msg).fadeIn();
                //remove down button
                // and remove support button


           }
      });
   });

HTML：

 <ul class="stats">
        <li id="support_23"class="score">
            <h2 class="score_up">12</h2>
            <span style="text-align:center;">Supporters</span>
        </li>
        <li>
    <button type="submit" value="Actions" class="support" title="support">
        <i></i>
        <span>Support</span>
    </button>
</li>


//vote down button

 <li id="down_23"class="score">
            <h2 class="score_down">12</h2>
            <span style="text-align:center;">down</span>
        </li>
        <li>
    <button type="submit" value="Actions" class="down" title="down">
        <i></i>
        <span>down</span>
    </button>
</li>

    </ul>

Answer 1

您的HTML无效，所以我会这样做：

<form action="javascript:alert('form')";>
<ul class="stats">
    <li id="topic_23"class="score">
        <h2 class="score_up">12</h2>
        <span style="text-align:center;">Supporters</span>
    </li>
    <li>
      <button type="submit" value="Actions" class="support" title="support">
      <i></i><span>Support</span></button>
    </li>
</ul>
</form>

然后jQuery（原来不适用，因为你想要.siblings()而不是.closest()现在是：

var the_id = $(this).closest("li").siblings('.score').attr('id')
                    .split('_').pop();

并取得成功：

$(this).closest("li").siblings("li.score").find("h2.score_up")
       .html(msg).fadeIn();

我认为您还遇到了 prevent default 的麻烦，因为您想要阻止form上的默认设置，在这种情况下，您可能会遇到委托问题。

以下是我对.live()所做的事情：

// Prevent form from submitting
$("form").live("submit", function(e) {
    e.preventDefault(); });

// Run Ajax
$('button.support').live('click', function(e) {
      //get the id
       var $score = $(this).closest("li").siblings('.score'),
           the_id = $score.attr('id').split('_').pop();
        //the main ajax request
      $.ajax({
           context:this,
           type: "POST",
           data: "action=support&id=" + the_id,
           url: "ajax/sa.php",
           success: function (msg) {
               $score.find("h2.score_up").html(msg).fadeIn(); 
           }
      });
});

Try it out on this jsFiddle

Answer 2

<button>成为<ul>的直接子女的HTML无效。

<ul>的儿童应为<li>。我不希望事情与无效的HTML一起正常工作。

<button>内有<li>的HTML：

<ul class="stats">
    <li id="topic_23" class="score">
        <h2 class="score_up">12</h2>
        <span style="text-align:center;">Supporters</span>
    </li>
    <li>
        <button type="submit" value="Actions" class="support" title="support">
            <i></i>
            <span>Support</span>
        </button>
    </li>
</ul>

jQuery，修复了一些遍历方法：

$('.stats').delegate('.support', 'click', function(e) {
      //stop event
      e.preventDefault();
        // cache a reference to the previous <li> element
        //   since it is used more than once
       var $prevLi = $(this).closest('li').prev('li');
      //get the id
       var the_id = $prevLi.attr('id').split('_').pop();
        //the main ajax request
       $.ajax({
           context:this,
           type: "POST",
           data: "action=support&id=" + the_id,
           url: "ajax/sa.php",
          success: function (msg) {
               $prevLi.find("h2.score_up").html(msg).fadeIn();
           }
      });
 });

jquery的按钮问题？

2 个答案:

Try it out on this jsFiddle