Trigger click event

Question

I have below Javascript and HTML and I would like to trigger the click event to link with <a href="#detail" ...>. I could not see the log "summary click" in console, what element I should trigger on? I want to show the result on detail section, so I set the href to "#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 code

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

whether the `#summary` element exists in the dom when the script is executed — Arun P Johny, Jul 16 '14 at 12:59
It may be simpler to have `$('a[href=#detail]').click` instead — RevanProdigalKnight, Jul 16 '14 at 13:02
To Jai, yes script is put within $(document).ready(function() {}); block. — Kelvin, Jul 16 '14 at 13:07
To REvanProdigalKnight, I found there was some conflict if just using $('element').click in multi-page and $("#id").on("click", 'element', function (e) works. Of course this time can't, don't know. — Kelvin, Jul 16 '14 at 13:11
Your existing selector works fine: http://jsfiddle.net/TrueBlueAussie/3fwWD/ problem lays elsewhere. — iCollect.it Ltd, Jul 16 '14 at 13:12
Thanks user3558931 recall, content in #summary is dynamical content, so $(element).click doesn't work. — Kelvin, Jul 16 '14 at 13:27

score 0 · Answer 1 · answered Jul 16 '14 at 13:10

0

instead of <a href="#detail" ...> use this

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

and call it trigger

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

this will solve

answered Jul 16 '14 at 13:10

Sudhanshu Saxena

1,199
12
32

The existing selector works fine: http://jsfiddle.net/TrueBlueAussie/3fwWD/ The problem lays elsewhere. – iCollect.it Ltd Jul 16 '14 at 13:13
#detail is another section, will redirect the page to show the section. – Kelvin Jul 16 '14 at 13:20

PeterKA · Answer 2 · 2014-07-16T13:55:24.287

0

Here is how to trigger a click event on an element:

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

To listen to a click event on an element you use:

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

If element is added dynamically.

edited Jul 16 '14 at 13:55

answered Jul 16 '14 at 13:11

PeterKA

24,158
5
26
48

The existing selector works fine: http://jsfiddle.net/TrueBlueAussie/3fwWD/ The problem lays elsewhere. – iCollect.it Ltd Jul 16 '14 at 13:13
There's a difference between `trigger` and `listen`. – PeterKA Jul 16 '14 at 13:19
Yes, just commenting that the original selector was fine as-is. (The problem stated `I could not see the log "summary click" in console`). Thanks for updating (see SO's comments above about change to problem) – iCollect.it Ltd Jul 16 '14 at 13:22
I can't see which comment was from SO, only the user3558931, is it SO's comment? – Kelvin Jul 16 '14 at 14:09
Tried use both $('a[href=\\#detail]').click(); //or $('a[href="#detail"]').click(); but didn't work. Section #detail is showed but no content generated inside. Content should be built by calling reg_list.php and message "summary click" should be showed in console – Kelvin Jul 16 '14 at 14:37
You may want to re-word your question or ask it again and clearly indicate that you're using `jQuery Mobile`. Also select the `jQuery Mobile` tag so that your question is listed in the relevant categories. Let me know if I have am mistaken. – PeterKA Jul 16 '14 at 14:56

score 0 · Answer 3 · answered Jul 16 '14 at 13:16

0

You can try something like this:

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

answered Jul 16 '14 at 13:16

Nickey

1,191
1
13
21

The existing selector worked fine too: http://jsfiddle.net/TrueBlueAussie/3fwWD The problem lays elsewhere. – iCollect.it Ltd Jul 16 '14 at 13:23
Uncaught ReferenceError: $obj is not defined . Where is $obj defined? – Nickey Jul 16 '14 at 13:25
Don't care at its stage. Once I saw the answers listed I have given this one up as not useful :) – iCollect.it Ltd Jul 16 '14 at 13:28
To user3414905, the $obj is not the problem because it called an external script and return in json. I added the console.log() function to monitor the trigger but nothings happened. – Kelvin Jul 16 '14 at 14:55
Thanks TrueBlueAussie, your code is work but I found there is problem on production because the content in the #summary Div is dynamically built from programme. I try to use the code but didn't work. – Kelvin Jul 16 '14 at 15:18

Trigger click event

3 Answers3