0

Following partial view, that has an input submit button, is successfully rendered via an Ajax call. Now, I want to make a different Ajax call when the input submit button inside the Partial view is clicked. But, the following client-side click event of this button is not firing. Instead, when I click on the Go button, it directly calls the action method in the controller (bypassing the client side click event and hence not making my Ajax call shown below). For test I've put an alert("Test") before the Ajax call in the code below. But the alert is not firing, why? NOTE: Ajax script is in the same view where partial view is rendered.

Partial View:

@model myProj.Model.TestViewmodel
<form id="frmID" asp-controller="myController" asp-action="TestAction" method="get">
    List of Proj:<select asp-for="SelectedProjYr" asp-items="Model.lstProjYears"></select> <button type="submit" id="BtnGO" value="UpdateProjBtnGo" class="btn btn-default">GO</button>
</form>

Ajax Call when above button is clicked:

$(document).ready(function () {

    $("#BtnGO").click(function () {
        var btnVal = $(this).val();
        alert("Test");
        $.ajax({...
         ...
         ...
        });

});

UPDATE:

Following this jquery doc on Event Delegation, I tried the following but still alert('Test') does not popup. NOTE: Here #frmID is the id of the form that is a parent of BtnGO. Moreover, I've tried both with or without event.preventDefault(); line. I've also change button type from submit to button

$('#frmID').on('click', '#BtnGO', function (event) {
      event.preventDefault();
      alert('Test');
 });
nam
  • 21,967
  • 37
  • 158
  • 332
  • You dynamically adding the button so you need [event delegation](https://learn.jquery.com/events/event-delegation/) - `$(document).on('click', '#BtnGO', function() { ...` - but replace `document` with the closest ancestor that exists when the page is first rendered –  Feb 01 '17 at 01:48
  • your button has submit type and automatically submit form. Change button type. – Alexan Feb 01 '17 at 01:50
  • You also need to make it `type="button"` (not submit) –  Feb 01 '17 at 01:53
  • @StephenMuecke I've added an **UPDATE** section. It still does not trigger the client-side click event. Chrome dev tool also does not show any activity when I click `BtnGO` button. – nam Feb 01 '17 at 04:19
  • @Alex I've added an UPDATE section to my post. It still does not trigger the click event on client side. – nam Feb 01 '17 at 04:21
  • 1
    Your `
    ` element is part of the partial which is dynamically loaded so `$('#frmID').on('click', '#BtnGO', function (event) {` does not work. Read my previous comment - it needs to be _the closest ancestor that **exists** when the page is first rendered_
     –  Feb 01 '17 at 04:27
  • @StephenMuecke You are correct. I missed that part. It's working now. I think you may want to make your comment a response and I'll mark that as an answer. That will help some other readers of this post, as well. – nam Feb 01 '17 at 04:31
  • `$(document).on('click', '#BtnGO', function (event) { event.preventDefault(); alert('Test'); });` – Hemal Feb 01 '17 at 04:32

0 Answers0