0

それぞれが href 属性を持つリンクのリストがあります。

<a href="./page1.php" class="points">page 1</a>
<a href="./page2.php" class="points">page 2</a>
<a href="./page3.php" class="points">page 3</a>
<a href="./page4.php" class="points">page 4</a>

クラス「ポイント」のリスナーがあります：

$(".points").live('click',function(){
    id = $(this).attr("id");
    $.ajax({
        type: "POST",
        url: 'points.php',
        data:{id:id},
        success: function()
        {

        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
            alert(XMLHttpRequest.responseText);
        }
    });
});

href は機能しますが、クリックは機能しません。href 属性を削除すると、クリック リスナーは完全に機能します。これら 2 つが一緒に機能することは可能ですか?

4

3 に答える 3

2

移動するとすぐにスクリプトの実行が停止するため、デフォルトの動作をキャンセルする必要があります。Ajax 呼び出しが終了するまで待ってから、スクリプトを介して移動することを検討できます。

$(".points").live('click',function(e){ // <--- Add e parameter

    e.preventDefault(); // <--- Add this

    id = $(this).attr("id");
    href = $(this).attr("href"); // Link we will navigate to when done
    $.ajax({
        type: "POST",
        url: 'points.php',
        data:{id:id},
        success: function()
        {
           location.href = href; // Do the navigation now that we're done
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
            alert(XMLHttpRequest.responseText);
        }
    });
});
于 2013-10-16T19:58:20.153 に答える
2

これを試して：

$(".points").live('click',function(e){ //added e as function argument
    e.preventDefault(); //added preventDefault();
    var id = this.id; // changed here to this.id, and added var (so it will be a local variable)
    $.ajax({
        type: "POST",
        url: 'points.php',
        data:{id:id},
        success: function()
        {

        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest);
            alert(textStatus);
            alert(errorThrown);
            alert(XMLHttpRequest.responseText);
        }
    });
});
  • preventDefault()について読むには
  • ご了承くださいAs of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.
于 2013-10-16T19:58:43.937 に答える
0

Ajax と Href が連携するために

試す

  $(".points").live('click',function(e){
  e.preventDefault();
  var id = $(this).attr("id");
  var url= $(this).attr("href");

   $.ajax({
   type: "POST",
   url: 'points.php',
   data:{id:id},
    success: function()
    {
     //Do something before going to page
       window.location.href=url;

    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest);
        alert(textStatus);
        alert(errorThrown);
        alert(XMLHttpRequest.responseText);
    }
   });
   });
于 2013-10-16T20:06:56.330 に答える