Scribd
Upload
632 views

Jquery - Partial View Click Event Not Fire - Stack Overflow PDF

The document discusses how to handle click events for buttons in a partial view that is loaded asynchronously in jQuery. When binding click events directly to the button, they do not fire because the partial view content is added to the DOM after page load. Using jQuery's .live() and .on() methods with event delegation allows the events to be handled properly as these will apply to current and future elements in the DOM. Binding the event to a static ancestor element like document ensures it works even for dynamically loaded content.

Uploaded by

Janus_Quimera
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
632 views

Jquery - Partial View Click Event Not Fire - Stack Overflow PDF

The document discusses how to handle click events for buttons in a partial view that is loaded asynchronously in jQuery. When binding click events directly to the button, they do not fire because the partial view content is added to the DOM after page load. Using jQuery's .live() and .on() methods with event delegation allows the events to be handled properly as these will apply to current and future elements in the DOM. Binding the event to a static ancestor element like document ensures it works even for dynamically loaded content.

Uploaded by

Janus_Quimera
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

2/6/2014 jquery - Partial View click event not fire - Stack Overflow

http://stackoverflow.com/questions/15437007/partial-view-click-event-not-fire 1/2
Take the 2-minute tour
Sampath
4,027 3 17 40
2 Answers
My *.aspx Page (main page):
function getEmployeeHours(employeeId,year,month) {
$('#clocked-details').load('/Employees/GetEmployeeClockedHours/',{ 'employeeId': employeeId,'year': year,'month': month
};
My partial view *.ascx :
<td>
<button id="btnSave" type="button" class="actionButton">
Save</button>
</td>
As above code snippet I need to accsess partial view btnSave from main view to trigger click event.
I have written below code inside the main view.
$('#btnSave').off('click').on('click', function () {
var yearValue = $("#year").val();
var monthValue = $("#month").val();
$.ajax({
url: "/Employees/UpdateEmployeeClockedHoursByProvider",
type: 'POST',
cache: false,
data: { employeeId: employeeId, year: yearValue, month: monthValue },
success: function (result) {
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
return false;
});
But it doesn't fire.Here I am using load jquery method to load my partial view asynchronously.
So my question is how should I fire click event of partial view ?
jquery asp.net-mvc-2 jquery-load
asked Mar 15 '13 at 16:06
Is the button click event inside partial view or the main view? Siva Gopal Mar 15 '13 at 16:24
@SivaGopal I have put that event both places.But no luck ?Any Idea ? Sampath Mar 15 '13 at 16:25
Did you try ("#btnSave").live("click") event of jquery as well while keeping the script in the main view?
Siva Gopal Mar 15 '13 at 16:26
1 @SivaGopal Thanks. It's working for live method.If you can put this as a answer then I can accept it.
Sampath Mar 15 '13 at 16:34
thanks for the update and i provided it as an answer. Siva Gopal Mar 20 '13 at 19:23
Since the usercontrol containging the button is being loaded dynamically, you can use
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.
Partial View click event not fire
sign up

log in

tour

help

careers 2.0

add comment
2/6/2014 jquery - Partial View click event not fire - Stack Overflow
http://stackoverflow.com/questions/15437007/partial-view-click-event-not-fire 2/2
Siva Gopal
1,297 7 14
Jack
3,159 1 7 14
("#btnSave").live("click"){...} event of jquery while keeping the script in the main view, which
can keep track of the controls being added to the DOM in future. So whenever a control matching the
specified selector for "live(..)" appears, the event is wiredup automatically.
Hope this help you.
answered Mar 20 '13 at 19:22
Thanks for the answer. Sampath Mar 20 '13 at 21:05
Since your html is being loaded into the page dynamically you'll have to give more context to your DOM
query.
Try this.
$(document).on('click', '#bntSave', function(){
//do stuff
});
answered Mar 15 '13 at 16:17
Not the answer you're looking for? Browse other questions tagged jquery
asp.net-mvc-2 jquery-load or ask your own question.
add comment
add comment

You might also like