Вызов функции jquery из кода позади doesnt работает

Question

У меня есть функция jquery под названием MyFunc() в отдельном файле .js. Я хотел вызвать эту функцию в C# -коде за событием нажатия кнопки. (то есть, если данные будут добавлены успешно, вызовите MyFunc()). Первоначально эта функция выглядела как этот

$(".next").click(function() { 

, где он будет непосредственно называться во время, когда жерех: кнопка нажата.

<asp:button id="btnNext" runat="server" CssClass="next action-button" Text="Next" OnClientClick="return false"/> 

Так что я изменил функцию

function MyFunc(){} 

и кнопку

<asp:Button ID="btnNext" runat="server" Text="Next" CssClass="action-button" OnClick="btnNext_Click1"/> 

и в коде позади события нажатия кнопки

Page.ClientScript.RegisterClientScriptInclude(GetType(), "MyScript", "Easying.js"); 
Page.ClientScript.RegisterClientScriptInclude(GetType(), "MyScript", "Reg.js"); 
Page.ClientScript.RegisterStartupScript(GetType(), "MyScript", "MyFunc()", true); 

это не дает мне никаких ошибок , Но это не работает. ниже - это функция.

var current_fs, next_fs, previous_fs; //fieldsets 
var left, opacity, scale; //fieldset properties which we will animate 
var animating; //flag to prevent quick multi-click glitches 

$(".next").click(function() { 

    if (animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 

    //activate next step on progressbar using the index of next_fs 
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

    //show the next fieldset 
    next_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({ opacity: 0 }, { 
     step: function (now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale current_fs down to 80% 
      scale = 1 - (1 - now) * 0.2; 
      //2. bring next_fs from the right(50%) 
      left = (now * 50) + "%"; 
      //3. increase opacity of next_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({ 'transform': 'scale(' + scale + ')' }); 
      next_fs.css({ 'left': left, 'opacity': opacity }); 
     }, 
     duration: 800, 
     complete: function() { 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

также, как вы можете видеть, MyFunc() используется для перехода от одного набора полей к другому. На моей странице aspx есть 3 поля. и индикатор выполнения (1--2-3). Индикатор выполнения должен перемещаться от одного к другому. и полевые изменения также изменяются. в текущей ситуации я вижу, что индикатор выполнения перемещается от 1 до непосредственно 3. и никаких изменений в наборе полей. вот где я взял код для этого. Как уже упоминалось выше, он отлично работает, когда я вызываю его непосредственно на странице aspx. http://codepen.io/atakan/pen/gqbIz

heres MyFunc() !!

function MyFunc() { 
var current_fs, next_fs, previous_fs; //fieldsets 
var left, opacity, scale; //fieldset properties which we will animate 
var animating; //flag to prevent quick multi-click glitches 

if (animating) return false; 
animating = true; 

current_fs = $(this).parent(); 
next_fs = $(this).parent().next(); 

//activate next step on progressbar using the index of next_fs 
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

//show the next fieldset 
next_fs.show(); 
//hide the current fieldset with style 
current_fs.animate({ opacity: 0 }, { 
    step: function (now, mx) { 
     //as the opacity of current_fs reduces to 0 - stored in "now" 
     //1. scale current_fs down to 80% 
     scale = 1 - (1 - now) * 0.2; 
     //2. bring next_fs from the right(50%) 
     left = (now * 50) + "%"; 
     //3. increase opacity of next_fs to 1 as it moves in 
     opacity = 1 - now; 
     current_fs.css({ 'transform': 'scale(' + scale + ')' }); 
     next_fs.css({ 'left': left, 'opacity': opacity }); 
    }, 
    duration: 800, 
    complete: function() { 
     current_fs.hide(); 
     animating = false; 
    }, 
    //this comes from the custom easing plugin 
    easing: 'easeInOutBack' 
});}; 

Answer 1

это не будет работать, потому что ваш код здесь

current_fs = $(this).parent(); 
next_fs = $(this).parent().next(); 

$(this) в MyFunc() не кнопка, которая быть нажата, когда вы используете $(".next").click(function() { ... }, так что ваш код не работает, как ожидалось например, когда вы используете функцию click, используя jQuery, на данный момент вы можете преодолеть ее, отправив class для текущего и следующего пунктов, используя параметр в MyFunc(), чтобы вы могли написать его вот так:

function MyFunc(curClass, nxtClass) { 
    // your code ... 

    current_fs = $(curClass); 
    next_fs = $(nxtClass); 

    // your code... 
} 

он еще не протестирован, но вы должны быть в состоянии сделать это с помощью этой логики.

Answer 2

Ваша проблема в том, что вы смешиваете свои области переменных. Вы функция MyFunc() пытается установить current_fs и next_fs как таковой:

current_fs = $(this).parent(); 
next_fs = $(this).parent().next(); 

Но объект, который «это» ключевое слово относится к изменится от того, когда он используется в контексте, когда функция вызывается из события клика, где он будет ссылаться на кнопку, которая была нажата, в отличие от того, когда она вызывается из вашего кода за методом методом Page.ClientScript.RegisterStartupScript(), где она будет ссылаться на какой-либо другой объект, который, вероятно, имеет вам не нужно.

Поэтому вам необходимо будет правильно определить функцию текущего набора полей и следующего набора полей, используя другой метод.

Мое предложение, однако, заключается в том, чтобы полностью изменить вашу реализацию (если возможно), чтобы окончательная кнопка отправки была единственным действием обратной передачи, поскольку это более простое решение, которое не только приведет к более плавному пользователю, но и приведет к меньшему трафику между клиентом и сервером.