jQueryのクリックイベントの前にポストバックが発生するのはなぜですか？

jQueryの新機能ですが、クリックしたときにフォームのセクションを切り替える必要があるページ上のリンクがいくつかあります。JavaScriptが無効になっていると、それらのセクションを切り替えるために完全なポストバックが行われますjQueryのクリックイベントの前にポストバックが発生するのはなぜですか？

私のテスト環境では、jQueryスクリプトの後にPostBackが発生しますが、PostBackはjQueryのクリックイベントの前に発生します。テスト環境はWindows XP/IIS 5.1/VS2010ですが、IIS 6.0を実行するWindows 2003サーバーに展開されています。

私が使用しているコードは次のとおりです。私がの代わりに.click()に入れると、スクリプトは本番環境で実行されますが、.click()でも警告が表示されないため、jQueryスクリプトが実行される前にPostBackが発生していると想定しています。

のjQuery：

$(document).ready(function() { 
    // Toggle Details 
    $('.toggleDetailsButton').click(function() { 
     alert('test'); 
     $(this).parentsUntil(".parentRow").parent().next().toggleClass("hidden"); 
     return false; 
    }); 
});

コードビハインド：

Protected Sub rpData_ItemCommand(ByVal sender As Object, ByVal e As RepeaterCommandEventArgs) Handles rpData.ItemCommand 
    // Manually toggle rows here 
End Sub

ASP：提案パー

<asp:Repeater ID="rpData" runat="server"> 
    <ItemTemplate> 
     <tr class="parentRow"> 
      ... 
       <asp:Button runat="server" ID="cmdViewDetails" 
        CommandName="ToggleDetails" Text="details" 
        CssClass="buttonAsLink toggleDetailsButton" /> 
      ... 
     </tr> 
     <tr id="rpData_DetailsRow" class="detailsRow hidden" runat="server"> 

     </tr> 
    </ItemTemplate> 
</asp:Repeater>

編集

以下のコメントで、onClientClickでjQuery関数を実行すると、ページが正常に動作するようになりますが、私のテスト環境のjQueryイベントの後、プロダクションのjQueryイベントの前にPostBackがなぜ発生するのかを知りたいと思います。

私は2つの違いも気づきました。たとえば、テストでは正常に動作するが、本番では動作しない検索divのオン/オフを切り替えるボタンもあります。 $('.toggleSearchButton').next()を使用して検索ボタンの下にあるdivを取得し、そのクラス名をトグルします。プロダクションでは、このオブジェクトは[object Object]を返しますが、.attr('class')はundefinedを返します（.attr('id'),.attr('tag')、.nodeName）。私のテスト環境では、私の検索divの正しい値を返します。

IE、FF、Chromeでこの動作をテストしました。私のテストマシンでは、すべて3で正常に動作します。私のプロダクションマシンでは、IEのみが動作するはずです。

出典

2012-01-25 Rachel

の背後には、参照します。 – asawyer

@asawyer 'alert 'はポップアップしないので、PostBackがclickイベントの前に発生していると仮定しています。これは 'stopPropagation'も実行されないことを意味します（テストしただけでそれは助けになりません） – Rachel

あなたのページの最初または最後にjQueryを配置しましたか？ –

これを試してみてください：デフォルトのボタンで

$('.toggleDetailsButton').click(function (e) { 
    if (e.stopPropagation) e.stopPropagation(); 
    if (e.preventDefault) e.preventDefault(); 

    . 
    . 
});

は、送信ボタンをレンダリングします。 UseSubmitBehavior = "false"を設定して<input type="button" />要素にして、より良い結果が得られるかどうかを確認することもできます。

出典

2012-01-25 14:21:07

ありがとう、しかし、私はすでに2回これまで述べてきたように、PostBackはclickイベントの前に実行されるので、何もしません。 – Rachel

'UseSubmitBehavior =" false "'を使用しても動作しません – Rachel

結果のHTMLをご覧ください。 ASP.NETが注入されている場合、それはあなたがおそらくこれを

$('.toggleDetailsButton').removeAttr('onclick') 
    .click(function(e){ 
     e.preventDefault(); 
     ... 
});

出典

2012-01-25 14:27:48 PHeiberg

これは最初は素晴らしいアイデアだと思っていましたが、実装しようとするとPostBackが引き続き発生します。私はそれが関連しているかどうかはわかりませんが、変更前に私のページのソースを見ると、ボタンに 'onClick'属性はありません。 – Rachel

を使用して、それを削除する必要がある独自のonclick="__DoPostBack..."コードですか？あなたは

出典

2012-01-25 14:45:46 dubRun

私は同じ動作をします。 – Rachel

$('.toggleDetailsButton').click(function (e) { 
e.preventDefault(); 

});

。ネットは、すべてのボタンにonclickイベントを置きますので、最初のあなたは、このようなあなたのコードからそれを削除する必要があります： -

$(document).ready(function() { 
$('.toggleDetailsButton').removeAttr('onclick'); 
$('.toggleDetailsButton').click(function (e) { 
    alert('yes'); 
    e.preventDefault(); 
    return false; 
    }); 
});

出典

2012-04-10 22:31:24 scripter78

が必要なのは、実際にASPでなければなりません

$('.toggleDetailsButton') 
    .unbind('click') 
    .bind('click', function() { 
     // etc 
});

出典

2012-04-11 14:52:49

、このコードが動作しています。私はそれをチェックしてくださいテストしました。 http://api.jquery.com/event.stopPropagation/あなたのクリック機能ではない明確なものをアップしなければEnableEventValidation = "false" を

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sortable.aspx.cs" Inherits="Sortable" EnableEventValidation="false" %> 

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head runat="server"> 
      <title>Sortable</title> 

      <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script> 

      <script language="javascript" type="text/javascript"> 
       function xyz() { 
        alert('test'); 
        $(this).parentsUntil(".parentRow").parent().next().toggleClass("hidden"); 

       } 

      </script> 

     </head> 
     <body> 
      <form id="form1" runat="server"> 
      <div> 
       <asp:Repeater ID="rpData" runat="server"> 
        <ItemTemplate> 
         <tr class="parentRow"> 
          <asp:Button runat="server" ID="cmdViewDetails" CommandName="ToggleDetails" Text="details" 
           CssClass="buttonAsLink toggleDetailsButton" OnClientClick="javascript:xyz();" /> 
         </tr> 
         <tr id="rpData_DetailsRow" class="detailsRow hidden" runat="server"> 
         </tr> 
        </ItemTemplate> 
       </asp:Repeater> 
      </div> 
      </form> 
     </body> 
     </html>

コードファイル

  using System; 
      using System.Collections.Generic; 
      using System.Linq; 
      using System.Web; 
      using System.Web.UI; 
      using System.Web.UI.WebControls; 

      public partial class Sortable : System.Web.UI.Page 
      { 
       protected void Page_Load(object sender, EventArgs e) 
       { 
        List<string> l = new List<string>(); 
        l.Add("A"); 
        l.Add("B"); 
        l.Add("C"); 
        rpData.DataSource = l; 
        rpData.DataBind(); 
       } 
      }

出典

2012-04-30 12:16:18 Humayoo

jQueryのクリックイベントの前にポストバックが発生するのはなぜですか？

答えて

関連する問題