Почему мой PostBack происходит до моего события click jQuery?

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

Он отлично работает в моей тестовой среде, при этом PostBack происходит после сценария jQuery, но как только я его развертываю, PostBack происходит до события click jQuery. Он развернут на сервере Windows 2003 с IIS 6.0, а моя тестовая среда — Windows XP/IIS 5.1/VS2010.

Вот код, который я использую. Сценарий запускается в рабочей среде, если я помещаю его в .ready() вместо .click(), но в .click() я даже не получаю оповещение, поэтому я предполагаю, что проблема заключается в том, что PostBack происходит до того, как сценарий jQuery сможет выполниться.

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>

Изменить

В соответствии с предложением в комментариях ниже запуск функции jQuery в onClientClick заставляет страницу работать так, как она должна, однако я все еще хочу знать, почему PostBack происходит после события jQuery в моей тестовой среде, но до события jQuery в рабочей среде.

Я заметил и другие различия между ними. Например, у меня также есть кнопка, которая включает/выключает поисковый блок, который отлично работает при тестировании, но не в продакшене. Он использует $('.toggleSearchButton').next() для получения div под кнопкой поиска и переключает имя класса. В рабочей среде этот объект возвращает [object Object], однако вызов .attr('class') возвращает undefined (так же, как и .attr('id'), .attr('tag') и .nodeName). В моей тестовой среде он возвращает правильные значения для моего поискового div.

Я тестировал это поведение в IE, FF и Chrome. На моей тестовой машине он отлично работает на всех трех. На моей рабочей машине только IE работает так, как должен.


jquery asp.net iis-6 asp.net-2.0 iis-5
person Rachel    schedule 25.01.2012    source источник
comment
Посмотрите, не очищается ли api.jquery.com/event.stopPropagation в вашей функции щелчка. вещи вверх.   -  person asawyer    schedule 25.01.2012
comment
@asawyer alert не всплывает, поэтому я предполагаю, что PostBack происходит до события click. Это означает, что stopPropagation тоже не запустится (только что проверил, не помогает)   -  person Rachel    schedule 25.01.2012
comment
Вы разместили этот jQuery в начале или в конце своей страницы?   -  person Zack Macomber    schedule 25.01.2012
comment
Хорошая точка зрения. Здесь еще рано. попробуйте это - измените функцию анонимного клика на обычную именованную функцию и установите onclick='return xxx' в html, посмотрите, не дойдет ли она до функции сейчас.   -  person asawyer    schedule 25.01.2012
comment
@ZackMacomber Это в середине страницы, перед кнопкой. На странице есть мастер-форма, а jQuery находится в начале области содержимого.   -  person Rachel    schedule 25.01.2012
comment
Вы получили какую-либо ошибку javascript?   -  person sathishkumar    schedule 25.01.2012
comment
@sathishkumar Нет. Сценарий работает нормально, если я поставлю его в .ready()   -  person Rachel    schedule 25.01.2012
comment
Вы видите разницу, если вы поместите jQuery в начало или конец страницы?   -  person Zack Macomber    schedule 25.01.2012
comment
Хотите без .ready()? Если это так, разместите свой код внизу страницы после тега сценария jquery.js.   -  person sathishkumar    schedule 25.01.2012
comment
@asawyer Он запускается, когда я помещаю javascript в onClientClick (onClick пытается выполнить обратную передачу, так как это кнопка asp). Я все еще хотел бы знать, почему я не могу использовать синтаксис, который у меня есть, поскольку я бы предпочел, чтобы мой javascript не попадал в мои файлы asp, если это возможно.   -  person Rachel    schedule 25.01.2012
comment
@Rachel По крайней мере, теперь проблема должна быть более ясной. Кстати, вам не нужно вставлять предупреждения для целей отладки. Просто введите debugger;, и он сломается для вас.   -  person asawyer    schedule 25.01.2012
comment
@asawyer Кстати, если вы опубликуете это как ответ, я проголосую за него, поскольку он решает мою насущную проблему, хотя я все еще хочу знать, почему порядок обратной передачи / щелчка отличается в моей производственной и тестовой средах.   -  person Rachel    schedule 25.01.2012
comment
В каком браузере вы это тестируете? У меня была аналогичная проблема с IE, для которой у меня есть решение.   -  person Becuzz    schedule 25.01.2012
comment
@Becuzz Он отлично работает в IE, FF и Chrome, если размещен в моей тестовой среде, но я заметил проблему в рабочей копии в Chrome. Я только что протестировал IE и FF, и FF имеет ту же проблему, но IE работает нормально.   -  person Rachel    schedule 25.01.2012
comment
А что, если вы попытаетесь поставить OnClientClick=return false?   -  person Hatjhie    schedule 15.09.2014

Ответы (6)


arrow_upward
0
arrow_downward

Попробуй это:

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

   .
   .
});

По умолчанию кнопка отображает кнопку отправки. Вы также можете установить UseSubmitBehavior="false", чтобы сделать его элементом <input type="button" />, и посмотреть, даст ли это вам лучшие результаты.

person Brian Mains    schedule 25.01.2012
comment
Спасибо, но, как я уже дважды говорил, PostBack запускается до события click, так что это вообще ничего не даст. - person Rachel; 25.01.2012

arrow_upward
0
arrow_downward

Посмотрите на получившийся html. Если ASP.NET внедрил свой собственный код onclick="__DoPostBack...", вам необходимо удалить его, используя

$('.toggleDetailsButton').removeAttr('onclick')
    .click(function(e){
        e.preventDefault();
        ...
});
person PHeiberg    schedule 25.01.2012
comment
Сначала я подумал, что это отличная идея, однако, когда я попытался реализовать ее, PostBack все еще происходит. Я не уверен, связано ли это, но если я просматриваю источник своей страницы до изменения, на моей кнопке нет атрибута onClick - person Rachel; 25.01.2012

arrow_upward
0
arrow_downward

Возможно это?

$('.toggleDetailsButton')
     .unbind('click')
     .bind('click', function() {
       // etc
});
person dubRun    schedule 25.01.2012
comment
Я получаю такое же поведение - PostBack происходит до щелчка. - person Rachel; 25.01.2012

arrow_upward
0
arrow_downward 

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

});

Это должно быть все, что вам нужно

person scripter78    schedule 10.04.2012

arrow_upward
0
arrow_downward

На самом деле asp.net помещает событие onclick на каждую кнопку, поэтому сначала вам нужно удалить это из своего кода следующим образом:

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

arrow_upward
0
arrow_downward

этот код работает. я проверял, пожалуйста, проверьте.сделайте 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();
                }
            }
person Humayoo    schedule 30.04.2012