Почему мой PostBack происходит до моего события jQuery click? - PullRequest
Новая
       53

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

5 голосов
/ 25 января 2012

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

Он отлично работает в моей тестовой среде, когда PostBack происходит после сценария jQuery, но после его развертывания PostBack происходит до события щелчка 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. На моей тестовой машине все отлично работает на всех 3. На моей рабочей машине только IE работает так, как должен.

Ответы [ 6 ]

0 голосов
/ 30 апреля 2012

этот код работает.Я проверил это, пожалуйста, проверьте. make 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();
                }
            }
0 голосов
/ 11 апреля 2012

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

$(document).ready(function () {
$('.toggleDetailsButton').removeAttr('onclick');
$('.toggleDetailsButton').click(function (e) { 
   alert('yes');
   e.preventDefault(); 
   return false;
   }); 
});
0 голосов
/ 11 апреля 2012 
$('.toggleDetailsButton').click(function (e) { 
 e.preventDefault(); 

});

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

0 голосов
/ 25 января 2012

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

$('.toggleDetailsButton')
     .unbind('click')
     .bind('click', function() {
       // etc
});
0 голосов
/ 25 января 2012

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

$('.toggleDetailsButton').removeAttr('onclick')
    .click(function(e){
        e.preventDefault();
        ...
});
0 голосов
/ 25 января 2012

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

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

   .
   .
});

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

...