jQuery Mobile Clickhander 不适用于自定义对象的实例

我正在通过引用锚标签内的处理程序函数为 jQuery Mobile 中的锚标签设置一个点击处理程序（由于麻烦的原因，我需要这样做）。如果我使用字符串或整数作为函数参数，这种方法效果很好，但是如果我尝试输入对象的实例（如下图所示），它不起作用。任何关于我可能做错了什么的建议将不胜感激。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            function testObject() {
                this.param1;
            }
            function maketestObject(param1) {
                var result = new testObject();
                result.param1 = param1;
                return result;
            }
            var i = 0;
            var html;
            for (i = 0; i <= 5; i = i + 1) {
                var testInstance = maketestObject("test param");
                html += '<li><a href="#" data-theme="a" onclick="clickHandler(' + testInstance + '); return false;" rel="external" data-role="button">click test1</a></li>';
            }
            $("#testList").append(html);
            $("#testList").listview("refresh");
        });
        function clickHandler(e) {
            alert(e);
        }
    </script>
    <div data-role="page" class="type-interior">
        <div id="main" data-role="content">
            <ul id="testList" data-role="listview"></ul>
        </div>
    </div>
</body>

你试过使用.live（）函数吗当您将动态元素添加到 DOM 时，它们没有事件，所以我建议您

    for (i = 0; i <= 5; i = i + 1) {
                var testInstance = maketestObject("test param");
                var temp = "'" + testInstance + "'";
                html += '<li><a href="#" data-theme="a" class="new" return false;" rel="external" data-role="button">click test1</a></li>';
            }
/*** jQuery code ****/
        $(".new").live("click",function(){
    // your code here 
    aler("it working");
    });

我

通常在按钮对我不起作用时执行此操作，希望对您有用！

我认为它有效

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

$（document）.ready（function（） {

        function testObject() {
            this.param1;
        }
        function maketestObject(param1) {
            var result = new testObject();
            result.param1 = param1;
            return result;
        }
        var i = 0;
        var html;
        for (i = 0; i <= 5; i = i + 1) {
            var testInstance = maketestObject("test param");
//var temp = "'" + testInstance+ "'";

 /// Chaged into 
            var temp = "'" + testInstance.param1  + "'";
            html += '<li><a href="#" data-theme="a" onclick="clickHandler(' + temp + '); return false;" rel="external" data-role="button">click test1</a></li>';
        }
        $("#testList").append(html);
        $("#testList").listview("refresh");
    });
    function clickHandler(e) {
        alert(e);
    }
</script>
<div data-role="page" class="type-interior">
    <div id="main" data-role="content">
        <ul id="testList" data-role="listview"></ul>
    </div>
</div>

我认为你可以用这个来实现你的oal..

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
    <script>
// Create global object array ..
        var testInstanc = [];
        $(document).ready(function() {


            function testObject() {
                this.param1;
            }
            function maketestObject(param1) {
                var result = new testObject();
                result.param1 = param1;
                return result;
            }
            var i = 0;
            var html;
            for (i = 0; i <= 5; i = i + 1) {
                // var temp = "'" + testInstance + "'";
// set array to object
                 testInstanc[i] = maketestObject("test param" + i);
pass clickhandler function to your array index
                 html += '<li><a href="#" data-theme="a" onclick="clickHandler(' + i + '); return false;" rel="external" data-role="button">click test1</a></li>';
            }
            $("#testList").append(html);
            $("#testList").listview("refresh");

        });
        function clickHandler(i) {

使用 testInstance 数组访问对象属性 alert（testInstanc[i].param1）;

        }
    </script>
    <div data-role="page" class="type-interior">
        <div id="main" data-role="content">
            <ul id="testList" data-role="listview"></ul>
        </div>
    </div>
</body>
</html>

相关内容

最新更新

热门标签：