html tag on click

Question

I have this in a partial class that is binded when I search an Item

<a id="InfoButton" href="~/SupplierMaterials/ModalProductInfo/@item.IdSupplierMaterials" 
class="btn btn-xs btn-outline btn-primary">Info <i class="fa fa-long-arrow-right"></i> </a>

And in the parent class I have this script

            $("#InfoButton").on("click", function (e) {

                var notModal = String(this.href);
                notModal = notModal.toLowerCase();

                if (notModal.indexOf("modal") != -1) {
                    e.preventDefault();
                    $('#myModalContent').load(this.href, function () {
                        $('#myModal').modal({
                            /*backdrop: 'static',*/
                            keyboard: true
                        }, 'show');

                        bindForm(this);
                    });
                }
            });
        });
        function bindForm(dialog) {

            $('form', dialog).submit(function () {
                $.ajax({
                    url: this.action,

                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        if (result.success) {
                            $('#myModal').modal('hide');
                            //Refresh
                            location.reload();
                        } else {
                            $('#myModalContent').html(result);
                            bindForm();
                        }
                    }
                });
                return false;
            });
        }

But when I click in the link the function is never triggered

The click handler looks like it's applied ok - there's not enough code here to tell much more than that. Can you try putting them in the same class to make sure that's not the issue? — raduation, Aug 27 '15 at 19:00

score 1 · Accepted Answer · answered Aug 27 '15 at 19:05

1

I don't know if the <a id="InfoButton" is loaded dynamically, but if it's loaded dynamically, you'll need to use $("*").on("click","#InfoButton", function (e) instead of $("#InfoButton").on("click", function (e)

answered Aug 27 '15 at 19:05

AkrilBH

46
7

Thanks! how can I get more info about $("*")? – Luis Rosales Aug 28 '15 at 14:06
Do you mean an explanation to that? – AkrilBH Aug 28 '15 at 15:17
Try some tutorial how jQuery selector works from http://www.w3schools.com/jquery/jquery_ref_selectors.asp – AkrilBH Aug 28 '15 at 15:20

score 0 · Answer 2 · answered Aug 27 '15 at 19:09

You have to use $(document).ready:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
        function main() {
            $("#InfoButton").on("click", function (e) {
                var notModal = String(this.href);
                notModal = notModal.toLowerCase(); alert('test');
                if (notModal.indexOf("modal") != -1) {
                    e.preventDefault();
                    $('#myModalContent').load(this.href, function () {
                        $('#myModal').modal({
                            /*backdrop: 'static',*/
                            keyboard: true
                        }, 'show');
                        bindForm(this);
                    });
                }
            }); 
        }

        function bindForm(dialog) {    
            $('form', dialog).submit(function () {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        if (result.success) {
                            $('#myModal').modal('hide');
                            //Refresh
                            location.reload();
                        } else {
                            $('#myModalContent').html(result);
                            bindForm();
                        }
                    }
                });
                return false;
            });
        }

        $(document).ready(main);
    </script>
</head>
<body>
    <a id="InfoButton" href="~/SupplierMaterials/ModalProductInfo/@item.IdSupplierMaterials" class="btn btn-xs btn-outline btn-primary">Info <i class="fa fa-long-arrow-right"></i> </a>        
</body>
</html>

There are [several ways](http://stackoverflow.com/questions/6026645/document-readyfunction-vs-script-at-the-bottom-of-page), yes. — Lars Gendner, Aug 27 '15 at 21:40
Yes there are, but the real problem I had Is that the HTML tag was binded dynamically. Thanks — Luis Rosales, Aug 28 '15 at 13:59

html tag on click

2 Answers2