Question

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

Answer 1

我认为它有效

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

Answer 2

你是否试过.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");
    });

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

Answer 3

我认为你可以使用它来实现你的用途..

<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数组访问对象属性警报（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>

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

3 个答案: