Question

我有以下Javascript和HTML，我想触发点击事件与＆lt; a href =“＃detail”...＆gt;链接。我无法在控制台中看到日志“摘要点击”，我应该触发哪个元素？我想在详细信息部分显示结果，因此我将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>

Answer 1

而不是<a href="#detail" ...>使用此

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

并将其命名为触发器

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

这将解决

Answer 2

以下是如何触发元素上的click事件：

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

收听以查看您使用的元素上的点击事件：

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

如果动态添加元素。

Answer 3

您可以尝试这样的事情：

$(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');
            }
        });
    });
});

触发点击事件

3 个答案: