0

我正在通过引用锚标记内的处理程序函数来为 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>

4

3 回答 3

0

当您将动态元素添加到没有事件的 dom 时，您是否尝试过使用 .live() 函数，所以我建议您

    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");
    });

当按钮对我不起作用时，我通常会这样做，希望对你有用！

于 2012-05-31T05:38:37.490 回答
0

我认为它有效

<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>

$(文档).ready(函数() {

        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>

于 2012-05-31T05:14:11.827 回答
0

我想你可以用这个来实现你的 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>
于 2012-06-02T13:53:16.547 回答