button click on jquery dialog having issues after ajax call

Question

My modal window(jquery) has one link and two buttons. On click of the link I am replacing the current view with a new view using ajax call. The new view has two button Continue(btnContinue) and Cancel. The problem I am facing is the button click on the newly loaded view would not work.

My code :

       $(".ddlCart li").click(function (e) {

        var ddlselectedVal = $(this).attr('id');
        var agentId = $("#AgentId").val();

        var EnvironmentURL = $("#EnvironmentURL").val();

        var Action = "PreAddToCart"

        var postData = {
            AgentId: agentId,
            ActionTypeValue: Action
        };

        var close = function (event, ui) {
            $(this).dialog("destroy");
        }
        var open = function (event, ui) {
            var agentId = $("#AgentId").val();
            var url = EnvironmentURL + "/Stats/SearchContacts";

            $("#btncart_cancel").on("click", function () {
               $('#dvModalDialog').dialog("close");
            });


     $("#lnkCreateNewcart").on("click", function () {

                            var url = EnvironmentURL + "/MLSReports/Stats/Cart";
                            //Send the data using post and put the results in a div                   
                            $.post(url, {
                               ActionTypeValue: "CreateNewContact"
                            },
                                function (data) {
                                  // Replace current data with data from the ajax call to the div.         
                                    $("#dvModalDialog").empty().append(data);

                                });
                        }); 


//******* This is not firing ....
     $("#btnContinue").on("click", function () {
                            alert('This click is from the second View');
                        });      


        };

        var rd = Mod.ReportsDialog({
            title: 'Add To Cart',
            close: close,
            open: open
        });
        rd.url = EnvironmentURL + "/Stats/Cart";
        rd.targetElement = '#dvModalDialog'
        rd.formName = '#frmCart'
        rd.postData = postData
        rd.open();
        var $that = this;
        });

Try binding your 2 buttons outside the first click handler, perhaps? — Antoine Cloutier
– Antoine Cloutier, Commented Jun 17, 2014 at 22:10
Did you tried to rebind events for your fresh component ? When you're generating the new view in ajax, you have to bind ( with $('#idNewComponent').on(...) ) your new components. — Ko2r
– Ko2r, Commented Jun 17, 2014 at 22:11
I tried binding outside the first click handler Still didn't work. — BumbleBee
– BumbleBee, Commented Jun 17, 2014 at 22:15
Check the id of the button is it the same? check your console also. Try moving that function inside the second view instead of first — Nikitesh
– Nikitesh, Commented Jun 18, 2014 at 8:51

user3743250 · Accepted Answer · 2014-06-17 22:23:33Z

1

EDIT: 1

Let me know if this works:

$(document).on('click', '#btnContinue', function(e) {

instead of:

$("#btnContinue").click(function (e) {

edited Jun 17, 2014 at 22:23

answered Jun 17, 2014 at 22:15

user3743250

895 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BumbleBee Over a year ago

what would the code be if the button is type="submit"

user3743250 Over a year ago

See if this works: $(document).on('click', '#btnContinue input[type=submit]', function(e) {

user3743250 Over a year ago

What are you submitting? Try this: $(document).on('submit', '#btnContinue input[type=submit]', function(e) {

BumbleBee Over a year ago

I need to validate the form.

BumbleBee Over a year ago

`I need to validate the form. Tried this but not working. $(document).on('click', '#btnContinue , function (e) { $("#formCreateContact").validate({ rules: { Contact_FirstName: { required: true } } });

Ideal Bakija · Accepted Answer · 2014-06-17 22:09:16Z

0

Instead of :

     $(".ddlCart li").click(function (e) {
...

use this:

$(".ddlCart li").on('click', function(e){

..

Because the first function only binds to the existing html elements on the page and doesn't recognize the new ones.

answered Jun 17, 2014 at 22:09

Ideal Bakija

6395 silver badges15 bronze badges

1 Comment

Ideal Bakija Over a year ago

do you have the class that you are calling in the new element ?

Collectives™ on Stack Overflow

button click on jquery dialog having issues after ajax call

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related