0

アンカータグ内のハンドラー関数を参照して、jQueryモバイルのアンカータグのクリックハンドラーを設定しています（取得するのが面倒な理由で、この方法で行う必要があります）。関数パラメーターとして文字列または整数を使用する場合、このアプローチはうまく機能しますが、オブジェクトのインスタンスを入力しようとすると (以下に示すように)、機能しません。私が間違っているかもしれないことについてのアドバイスは大歓迎です。

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

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

于 2012-05-31T05:14:11.827 に答える
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>
</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 に答える