Защо моят PostBack се случва преди моето събитие за щракване в jQuery?

Аз съм сравнително нов в jQuery, но имам някои връзки на моята страница, които трябва да превключват секциите на формуляра, видими при щракване, или ако javascript е деактивиран, той прави пълно обратно изпращане, за да превключва тези секции

Работи добре в моята тестова среда, като PostBack се появява след jQuery скрипта, но след като го разположа, PostBack се появява преди събитието jQuery click. Той е инсталиран на сървър на 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 в производството.

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

Тествах това поведение в IE, FF и Chrome. На моята тестова машина работи добре на всичките 3. На моята производствена машина само 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 се случва преди събитието за кликване. Това означава, че stopPropagation също няма да се стартира (току-що го тествах и не помага)   -  person Rachel    schedule 25.01.2012
comment
Поставили ли сте този jQuery в началото или в края на страницата си?   -  person Zack Macomber    schedule 25.01.2012
comment
Добра точка. Тук е още рано. опитайте това - променете функцията си за anon click на нормална наименована функция и задайте 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 се опитва да направи PostBack, тъй като това е asp бутон). Все пак бих искал да знам защо не мога да използвам синтаксиса, който имам, тъй като бих предпочел да запазя моя javascript извън моите asp файлове, ако е възможно.   -  person Rachel    schedule 25.01.2012
comment
@Rachel Поне проблемът трябва да е по-ясен сега. Между другото, не е необходимо да добавяте предупреждения за целите на отстраняването на грешки. Просто напишете debugger; и той трябва да се повреди за вас.   -  person asawyer    schedule 25.01.2012
comment
@asawyer Btw, ако публикувате това като отговор, ще го гласувам за него, тъй като решава непосредствения ми проблем, въпреки че все пак искам да знам защо редът за обратно изпращане/щракване е различен между моята производствена и тестова среда   -  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 се изпълнява преди събитието за кликване, така че това няма да направи нищо. - 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