0

以下の Javascript と HTML があり、クリック イベントをトリガーして <a href="#detail" ...> にリンクしたいと考えています。コンソールにログ "summary click" が表示されませんでした。どの要素をトリガーすればよいですか? 詳細セクションに結果を表示したいので、href を「#detail」に設定します。

Javascript

$("#summary").on("click", '[href="#detail"]', function (e) {
    e.preventDefault();
    console.log("summary click");

$.ajax({
    cache: false,
    type: "POST", 
        dataType: "html",
        data: { cid: $obj.cid },
        url: 'reg_list.php',
    complete: function (HttpRequest, textStatus) {
        $('#reg-detail').html(HttpRequest.responseText).trigger('create');
  }
    });
});

HTMLコード

<body class="ui-mobile-viewport ui-overlay-a">
    <section id="home" data-role="page" data-title="Summary" class="ui-page ui-page-theme-a ui-page-active" data-url="home" tabindex="0" style="min-height: 408px;">
        <header data-theme="b" data-role="header" role="banner" class="ui-header ui-bar-b"><h1 class="ui-title" role="heading" aria-level="1">Summary</h1></header>
        <article data-role="content" class="ui-content" role="main">
            <div id="home-content">

                <div id="signin" style="display: none;">
                ....(content omitted)....
                </div>
                <div id="summary">
                    <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
                        <li class="ui-li-has-count ui-li-has-thumb"><a href="#detail" data-cid="1" data-transition="flow" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><img src="1.png" style="max-width: 100px;" class="imageview"></a><span class="ui-li-count ui-body-inherit">11</span></li>
                        ....(content omitted)....
                    </ul>       
                </div>
            </div> <!-- home-content -->
        </article> <!-- article content -->
    </section> <!-- section home -->

    <section id="detail" data-role="page" data-title="Summary" class="ui-page ui-page-theme-a" data-url="detail" tabindex="0" style="min-height: 408px;">
        <header data-theme="b" data-role="header" role="banner" class="ui-header ui-bar-b"><h1 class="ui-title" role="heading" aria-level="1">Summary</h1></header>
        <article data-role="content" class="ui-content" role="main">
            <div id="reg-detail"></div>
        </article> <!-- article content -->
    </section> <!-- section detail -->
</body>
4

3 に答える 3

0

次のようなことを試すことができます：

$(function(){
    $("a[href='#detail']").click(function(e) {
        e.preventDefault();
        console.log("summary click");

        $.ajax({
            cache: false,
            type: "POST", 
            dataType: "html",
            data: { cid: $obj.cid },
            url: 'reg_list.php',
            complete: function (HttpRequest, textStatus) {
                $('#reg-detail').html(HttpRequest.responseText).trigger('create');
            }
        });
    });
});
于 2014-07-16T13:16:35.670 に答える
0

<a href="#detail" ...>これを使う代わりに

<a href="#" id ="#detail" ...>

それをトリガーと呼ぶ

$("#summary").on("click", '#detail', function (e) { ...}

これで解決します

于 2014-07-16T13:10:25.143 に答える
0

要素でイベントをトリガーする方法は次のとおりです。click

$('a[href=\\#detail]').click(); //or
$('a[href="#detail"]').click();

使用する要素でクリック イベントをリッスンするには:

$(function() {
    $(document).on('click', 'a[href="#detail"]', function( e ) {
        //your code here
    });
});

要素が動的に追加された場合。

于 2014-07-16T13:11:14.970 に答える