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

Answer 1

我不知道<a id="InfoButton"是否是动态加载的，但如果动态加载，则需要使用$("*").on("click","#InfoButton", function (e)代替$("#InfoButton").on("click", function (e)

Answer 2

您必须使用$(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>

<a> html tag on click

2 个答案: