Partial View click event not fire

Question

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 ?

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
@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

score 21 · Answer 1 · answered Mar 15 '13 at 16:17

21

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

Jack

8,851
3
21
26

score 0 · Accepted Answer · answered Mar 20 '13 at 19:22

0

Since the usercontrol containging the button is being loaded dynamically, you can use ("#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

Siva Gopal

3,474
1
25
22

I tried this and got 'TypeError: $(...).live is not a function'. Maybe .live is not supported anymore ? – thestruggleisreal Oct 26 '18 at 14:21

Partial View click event not fire

2 Answers2

Linked