    &lt;div id=&quot;largeArea&quot; v-on:click=&quot;do_X&quot;&gt;
        &lt;button&gt;Button&lt;/button&gt;
    &lt;/div&gt;

So I have this issue in Vue where I don&#39;t want &quot;do_X&quot; to trigger when I click on the button, although its a part of the largeArea. 

Prevent event bubbling in Vue

I&#39;m getting a JSON element and building a list from its items like this:

    getTitles: function(data) {
        data = data || {};
        var list = [];
        
        $.getJSON(
            &#39;/titles&#39;,
            data,
            function(data) {
                $.each(data.data, function(key, val) {
                    list.push(
                        &#39;&lt;li&gt;&lt;a href=&quot;&#39;+ val.href +&#39;&quot;&gt;&#39;+ val.title +&#39;&lt;/a&gt;&lt;span class=&quot;count&quot;&gt;&#39;+ val.count +&#39;&lt;/span&gt;&lt;/li&gt;&#39;
                    )
                });
                
                $(&#39;#title-items&#39;).html(list.join(&#39;&#39;));
            }
        );
    }

And I&#39;m binding click event for `a` elements like this:

    $(&#39;a&#39;).on(&#39;click&#39;, function(e) {
        alert(&#39;clicked&#39;);
        e.preventDefault();
    });

Old `a` elements shows alert but new ones follow URL. Event handler doesn&#39;t work for new ones. How can I solve this?

jQuery .on() method doesn&#39;t see new elements

I am working on some javascript UI, and using a lot of touch events like &#39;touchend&#39; for improved response on touch devices. However, there are some logical issues which are bugging me ...

I have seen that many developers mingle &#39;touchend&#39; and &#39;click&#39; in the same event. In many cases it will not hurt, but essentially the function would fire twice on touch devices:

    button.on(&#39;click touchend&#39;, function(event) {
      // this fires twice on touch devices
    });

It has been suggested that one could detect touch capability, and set the event appropriately for example:

    var myEvent = (&#39;ontouchstart&#39; in document.documentElement) ? &#39;touchend&#39; : &#39;click&#39;;
    button.on(myEvent, function(event) {
      // this fires only once regardless of device
    });

The problem with the above, is that it will break on devices that support both touch and mouse. If the user is currently using mouse on a dual-input device, the &#39;click&#39; will not fire because only &#39;touchend&#39; is assigned to the button.

Another solution is to detect the device (e.g. &quot;iOS&quot;) and assign an event based on that:
https://stackoverflow.com/questions/8503453/click-event-called-twice-on-touchend-in-ipad.
Of course, the solution in the link above is only for iOS (not Android or other devices), and seems more like a &quot;hack&quot; to solve something quite elementary.

Another solution would be to detect mouse-motion, and combine it with touch-capability to figure out if the user is on mouse or touch. Problem of course being that the user might not be moving the mouse from when you want to detect it ...

The most reliable solution I can think of, is to use a simple [debounce][1] function to simply make sure the function only triggers once within a short interval (for example 100ms):

    button.on(&#39;click touchend&#39;, $.debounce(100, function(event) {
      // this fires only once on all devices
    }));

Am I missing something, or does anyone have any better suggestions?

*Edit:* I found this link after my post, which suggests a similar solution as the above:
https://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both

  [1]: http://benalman.com/projects/jquery-throttle-debounce-plugin/

JavaScript touchend versus click dilemma

I have a problem with the `click()`-function from jquery. I create a `&lt;a&gt;`-element with `document.createElement(&#39;a&#39;)` and want call the `click()`-function about this element. About this element, I want to create an Excel-file and save this at the desktop. 

My code:

    $(&#39;body&#39;).on(&#39;click&#39;, &#39;#test&#39;, function(event) {
        var link = document.createElement(&#39;a&#39;);
        link.download = &#39;test.xls&#39;;
        link.href = &#39;data:application/vnd.ms-excel;utf-8,test&#39;;
        link.click();
    });

This function work under chrome, but not under Firefox.


[Working example](http://jsfiddle.net/0hnuw6b4/1/)


Does anyone have any idea why that does not work?

Programmatical click on &lt;a&gt;-tag not working in Firefox

What I want to do is to manipulate the mouse. It will be a simple macro for my own purposes. So it will move my mouse to certain position on the screen and click like I am clicking with certain interval.

How can I simulate a mouse click at a certain position on the screen?

I have a link:

    &lt;ul id=&quot;titleee&quot; class=&quot;gallery&quot;&gt;
      &lt;li&gt;
        &lt;a href=&quot;#inline&quot; rel=&quot;prettyPhoto&quot;&gt;Talent&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

and I am trying to trigger it by using:

    $(document).ready(function() {
      $(&#39;#titleee&#39;).find(&#39;a&#39;).trigger(&#39;click&#39;);
    });

But it doesn&#39;t work.

I&#39;ve also tried: `$(&#39;#titleee a&#39;).trigger(&#39;click&#39;);`

**Edit**:

I actually need to trigger whatever get&#39;s called here `&lt;a href=&quot;#inline&quot; rel=&quot;prettyPhoto&quot;&gt;`

How to trigger a click on a link using jQuery

How can I create an HTML checkbox with a label that is clickable (this means that clicking on the label turns the checkbox on/off)?

How to create a checkbox with a clickable label?

I&#39;m working on a mobile web site that has to work on a variety of devices. The ones giving me a headache at the moment are BlackBerry.

We need to support both keyboard clicks as well as touch events. 

Ideally I&#39;d just use:

    $thing.click(function(){...})

but the issue we&#39;re running into is that some of these blackberry devices have a very annoying delay from the time of the touch to it triggering a click. 

The remedy is to instead use touchstart:

    $thing.bind(&#39;touchstart&#39;, function(event){...})

But how do I go about binding both events, but only firing one? I still need the click event for keyboard devices, but of course, don&#39;t want the click event firing if I&#39;m using a touch device.

A bonus question: Is there anyway to do this and additionally accommodate browsers that don&#39;t even have a touchstart event? In researching this, it looks like BlackBerry OS5 doesn&#39;t support touchstart so will also need to rely on click events for that browser. 

ADDENDUM:

Perhaps a more comprehensive question is:

With jQuery, is it possible/recommended to handle both touch interactions and mouse interactions with the same bindings?

Ideally, the answer is yes. If not, I do have some options:

1) We use WURFL to get device info so could create our own matrix of devices. Depending on the device, we&#39;ll use touchstart OR click. 

2) Detect for touch support in the browser via JS (I need to do some more research on that, but it seems like that is doable).

However, that still leaves one issue: what about devices that support BOTH. Some of the phones we support (namely the Nokias and BlackBerries) have both touch screens *and* keyboards. So that kind of takes me full circle back to the original question...is there a way to allow for both at once somehow?

How to bind &#39;touchstart&#39; and &#39;click&#39; events but not respond to both?

Is there a way to click on a link on my page using JavaScript?

How do I programmatically click a link with javascript?

I&#39;m trying to overlay a &lt;canvas&gt; element on top of a webpage (to draw arbitrary graphics), and I&#39;ve come to the point where I can stack it inside of a &lt;div&gt; element on top of everything, but this prevents the user from clicking on any links/buttons/etc.
Is there a way to have its content float on top of everything (it&#39;s semi-transparent, so you can still see what is behind) and have the user interact with the layer below it?

I&#39;ve found a lot of information on the DOM event model, but none of it addresses the problem where the buttons and other &quot;native&quot; controls never seem to get the clicks in the first place.

HTML &quot;overlay&quot; which allows clicks to fall through to elements behind it

I have a timer in my JavaScript which needs to emulate clicking a link to go to another page once the time elapses. To do this I&#39;m using jQuery&#39;s `click()` function. I have used `$().trigger()` and `window.location` also, and I can make it work as intended with all three.

I&#39;ve observed some weird behavior with `click()` and I&#39;m trying to understand what happens and why.

I&#39;m using Firefox for everything I describe in this question, but I am also interested in what other browsers will do with this.

If I have not used `$(&#39;a&#39;).bind(&#39;click&#39;,fn)` or `$(&#39;a&#39;).click(fn)` to set an event handler, then calling `$(&#39;a&#39;).click()` seems to do nothing at all. It does not call the browser&#39;s default handler for this event, as the browser does not load the new page.

However, if I set an event handler first, then it works as expected, even if the event handler does nothing.

    $(&#39;a&#39;).click(function(){return true;}).click();

This loads the new page as if I had clicked the a myself.

So my question is twofold: Is this weird behavior because I&#39;m doing something wrong somewhere? and why does calling `click()` do nothing with the default behavior if I haven&#39;t created a handler of my own?

&lt;hr/&gt;

As Hoffman determined when he tried to duplicate my results, the outcome I described above doesn&#39;t actually happen. I&#39;m not sure what caused the events I observed yesterday, but I&#39;m certain today that it was not what I described in the question.

So the answer is that you can&#39;t &quot;fake&quot; clicks in the browser and that all jQuery does is call your event handler. You can still use `window.location` to change page, and that works fine for me.




Can I call jQuery&#39;s click() to follow an &lt;a&gt; link if I haven&#39;t bound an event handler to it with bind or click already?

I&#39;m working on an angular app for managers to keep track of their teams, and I&#39;m stuck with an @Output error :

    An error occurred: @Output deleteMeeting not initialized in &#39;MeetingItemComponent&#39;.

I have a Meetings component, generating a list of MeetingItem components. I want to perform actions when the user clicks on different buttons (edit, delete, show details).

Here is my parent Meetings template :

    &lt;div class=&quot;meeting__list&quot; [@newMeeting]=&quot;meetings.length&quot;&gt;
      &lt;app-meeting-item
        *ngFor=&quot;let meeting of meetings&quot;
        [meeting]=&quot;meeting&quot;
        (deleteMeeting)=&quot;deleteMeeting($event)&quot;
        (openMeetingDialog)=&quot;openMeetingDialog($event)&quot;
        (messageClick)=&quot;openMessage($event)&quot;
      &gt;&lt;/app-meeting-item&gt;
    &lt;/div&gt;

My MeetingItem template (only the part concerned by this post) :

    &lt;span class=&quot;meeting__actions&quot;&gt;
        &lt;mat-icon *ngIf=&quot;meeting.message&quot; (click)=&quot;onMessageClick(meeting)&quot; matTooltip=&quot;Read the message&quot;
          matTooltipPosition=&quot;above&quot; class=&quot;icon--notes&quot;&gt;notes&lt;/mat-icon&gt;
        &lt;mat-icon (click)=&quot;onOpenMeetingDialog(meeting)&quot; matTooltip=&quot;Edit this meeting&quot; matTooltipPosition=&quot;above&quot; class=&quot;icon--edit&quot;&gt;edit&lt;/mat-icon&gt;
        &lt;mat-icon (click)=&quot;onDeleteMeeting(meeting.id)&quot; matTooltip=&quot;Delete this meeting&quot; matTooltipPosition=&quot;above&quot; class=&quot;icon--delete&quot;&gt;delete_outline&lt;/mat-icon&gt;
      &lt;/span&gt;

My MeetingItem component :

    import { Component, Input, Output } from &#39;@angular/core&#39;;
    import { EventEmitter } from &#39;events&#39;;
    
    @Component({
      selector: &#39;app-meeting-item&#39;,
      templateUrl: &#39;./meeting-item.component.html&#39;,
      styleUrls: [&#39;./meeting-item.component.scss&#39;]
    })
    export class MeetingItemComponent {
    
      @Input() meeting;
    
      @Output() deleteMeeting = new EventEmitter();
      @Output() openMeetingDialog = new EventEmitter();
      @Output() messageClick = new EventEmitter();
    
      constructor() {}
    
      onDeleteMeeting(meetingId) {
        this.deleteMeeting.emit(meetingId);
      }
    
      onOpenMeetingDialog(meeting) {
        this.openMeetingDialog.emit(meeting);
      }
    
      onMessageClick(meeting) {
        this.messageClick.emit(meeting);
      }
    }

An error occurred: @Output not initialized

I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code/markup.

If I have this which is what I want the result to do - 

    &lt;a href=&quot;#&quot;&gt;
    &lt;div&gt;This is a link&lt;/div&gt;
    &lt;/a&gt;
 
The W3C validator says that block elements shouldn&#39;t be placed inside an inline element. Is there a better way to do this?





How to make a whole &#39;div&#39; clickable in html and css without JavaScript?

I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus&#39; area.

Is something like this possible with jQuery?

    $(&quot;#menuscontainer&quot;).clickOutsideThisElement(function() {
        // Hide the menus
    });


How do I detect a click outside an element?

How do I listen to click event on a ListView?

This is what I have now

    ListView list = (ListView)findViewById(R.id.ListView01);  
    ...  
    list.setAdapter(adapter);  

When I do the following  

    list.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {  
       public void onItemSelected(AdapterView parentView, View childView, 
                                                             int position, long id) 
       {  
           setDetail(position);  
       }

       public void onNothingSelected(AdapterView parentView) {  

       }  
    });  

That doesn&#39;t seem to do anything on click.  
And all those code live within a class that extends Activity.  


How to handle ListView click in Android

I have an input field, where I try to make autocomplete suggestion. Code looks like

    &lt;input type=&quot;text&quot; id=&quot;myinput&quot;&gt;
    &lt;div id=&quot;myresults&quot;&gt;&lt;/div&gt;

On input&#39;s `blur()` event I want to hide results&#39; div:

    $(&quot;#myinput&quot;).live(&#39;blur&#39;,function(){
         $(&quot;#myresults&quot;).hide();
    });

When I write something into my input I send request to server and get json response, parse it into ul-&gt;li structure and put this ul to my `#myresults` div. 

When I click to this parsed li element I want to set value from li to input and hide `#myresults` div

    $(&quot;#myresults ul li&quot;).live(&#39;click&#39;,function(){
         $(&quot;#myinput&quot;).val($(this).html());
         $(&quot;#myresults&quot;).hide();
    });

Everything is going good, but when I click to my li `blur()` event fires before `click()` and input&#39;s value don&#39;t get li&#39;s html. 

How can I set up `click()` event before `blur()`?

jQuery: fire click() before blur() event

I&#39;m having a problem. Basically, when a user clicks an &#39;Edit&#39; link on a page, the following Jquery code runs:

    $(&quot;#saveBtn&quot;).click(function () {
        saveQuestion(id);
    });

By doing this, the onClick event of the save button calls the `saveQuestion()` method and passes on the ID of the question for which the &#39;Edit&#39; link was clicked.

But if in the same session the user clicks edit on 2 questions, then instead of overwriting the previous `click` event handler, it instead causes 2 event handlers to run, one which might call  `saveQuestion(1)` and the other might call `saveQuestion(2)`. By doing this 1 question overwrites the other.

Is there a way to remove all previous `click` events that have been assigned to a button?

How to remove all click event handlers using jQuery?

Code:

    &lt;script src=&quot;http://code.jquery.com/jquery-latest.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    	$(&quot;#clicker&quot;).click(function () {
    		alert(&quot;Hello!&quot;);
    		$(&quot;.hide_div&quot;).hide();
    	});
    &lt;/script&gt;

The above code doesn&#39;t work.  When I click on #clicker, it doesn&#39;t alert and and it doesn&#39;t hide.  I checked the console and I get no errors.  I also checked to see if JQuery was loading and indeed it is.  So not sure what the issue is.  I also did a document ready function with an alert and that worked so not sure what I am doing wrong.  Please help.  Thanks!


Why is this jQuery click function not working?

Is there any difference between the following code?

    $(&#39;#whatever&#39;).on(&#39;click&#39;, function() {
         /* your code here */
    });

and 

    $(&#39;#whatever&#39;).click(function() {
         /* your code here */
    });

Difference between .on(&#39;click&#39;) vs .click()

I am quite new to python selenium and I am trying to click on a button which has the following html structure:

    &lt;div class=&quot;b_div&quot;&gt;

        &lt;div class=&quot;button c_button s_button&quot; onclick=&quot;submitForm(&#39;mTF&#39;)&quot;&gt;
            &lt;input class=&quot;very_small&quot; type=&quot;button&quot;&gt;&lt;/input&gt;
            &lt;div class=&quot;s_image&quot;&gt;&lt;/div&gt;
            &lt;span&gt;
      		   Search
            &lt;/span&gt;
        &lt;/div&gt;

        &lt;div class=&quot;button c_button s_button&quot; onclick=&quot;submitForm(&#39;rMTF&#39;)&quot; style=&quot;margin-bottom: 30px;&quot;&gt;
            &lt;input class=&quot;v_small&quot; type=&quot;button&quot;&gt;&lt;/input&gt;
            &lt;span&gt;
                  Reset
            &lt;/span&gt;
       &lt;/div&gt;

    &lt;/div&gt;

I would like to be able to click both the `Search` and `Reset` buttons above (obviously individually).

I have tried a couple of things, for example:

    driver.find_element_by_css_selector(&#39;.button .c_button .s_button&#39;).click()

or, 

    driver.find_element_by_name(&#39;s_image&#39;).click()

or, 

    driver.find_element_by_class_name(&#39;s_image&#39;).click()

but, I seem to always end up with `NoSuchElementException`, for example:

    selenium.common.exceptions.NoSuchElementException: Message: u&#39;Unable to locate element: {&quot;method&quot;:&quot;name&quot;,&quot;selector&quot;:&quot;s_image&quot;}&#39; ;

I am wondering if I can somehow use the onclick attributes of the HTML to make selenium click?

Any thoughts which can point me in the right direction would be great.
Thanks.


python selenium click on button

I have to open a URL on Click of `OK` Button in a view. Can someone tell how to do this?

open a url on click of ok button in android

I would like to catch a click event with jQuery and be able to tell if a key was pressed at the same time so I can fork within the callback function based on the keypress event.

**For example:**

    $(&quot;button&quot;).click(function() {
        if([KEYPRESSED WHILE CLICKED]) {
            // Do something...
        } else {
            // Do something different...
        }
    });

Is this possible at all or how can it be done if it is possible?


How can I check if a key is pressed during the click event with jQuery?

I need the button click of the intent ACTION_SEND.
Here there is no need of displaying UI.
Can I get the &quot;Send&quot; button click from the MMS-SMSProvider in Android?

Can I click a button programmatically for a predefined intent?

I&#39;m trying to get the X position with jQuery of a touchstart event, used with the live function?

I.e.

    $(&#39;#box&#39;).live(&#39;touchstart&#39;, function(e) { var xPos = e.PageX; } );

Now, this does work with &#39;click&#39; as the event. How on earth (without using the ***alpha*** jQuery Mobile) do I get it with a touch event?

Any ideas?

Thanks for any help.

Is there an equivalent to e.PageX position for &#39;touchstart&#39; event as there is for click event?

This function works perfectly on IE, Firefox and Chrome but when on the iPhone, it will only work when clicking on a `&lt;img&gt;`. Clicking on the page (anywhere but on a img) wont fire the event. 

    $(document).ready(function () {
      $(document).click(function (e) {
        fire(e);
      });
    });

    function fire(e) { alert(&#39;hi&#39;); }

The HTML part is extremely basic and shouldnt be a problem. 

Any ideas?

$(document).click() not working correctly on iPhone. jquery

I&#39;m using the following code to detect when a dynamically generated button is clicked.

    $(document).on(&quot;click&quot;,&quot;.appDetails&quot;, function () {
        alert(&quot;test&quot;);
    });

Normally, if you just did `$(&#39;.appDetails&#39;).click()` you could use `$(this)` to get the element that was clicked on.  How would I accomplish this with the above code?

For instance:

    $(document).on(&quot;click&quot;,&quot;.appDetails&quot;, function () {
        var clickedBtnID = ??????
        alert(&#39;you clicked on button #&#39; + clickedBtnID);
    });



Get clicked element using jQuery on event?

How can I trigger a function when I click anywhere on my page except on one div (`id=menu_content`) ?

jQuery click anywhere in the page except on 1 div

When I bind a function to a checkbox element like:

    $(&quot;#myCheckbox&quot;).click( function() {
        alert($(this).is(&quot;:checked&quot;));
    });

The checkbox changes its checked attribute **before** the event is triggered, this is the normal behavior, and gives an inverse result.

However, when I do:

    $(&quot;#myCheckbox&quot;).click();

The checkbox changes it checked attribute **after** the event is triggered.

My question is, is there a way to trigger the click event from jQuery like a normal click would do (first scenario)?

PS: I&#39;ve already tried with `trigger(&#39;click&#39;)`;

jQuery, checkboxes and .is(&quot;:checked&quot;)

Is there a well-known mistake I could be making here?  

I&#39;ve got a script that&#39;s using .on() because an element is dynamically generated, and it isn&#39;t working.  Just to test it out, I replaced the selector with the dynamic element&#39;s wrap, which is static, and it still didn&#39;t work!  When I switched to plain old .click for the wrap it worked, though.  
(This just won&#39;t work for the dynamic element obviously, the one that matters.)

**This works:**

    $(&quot;#test-element&quot;).click(function() {
        alert(&quot;click&quot;);
    });

**This doesn&#39;t:**

    $(document).on(&quot;click&quot;,&quot;#test-element&quot;,function() {
        alert(&quot;click&quot;);
    });

***UPDATE:***

I right-clicked and did &quot;Inspect Element&quot; in Chrome to just double-check something, and then after that the click event worked.  I refreshed and it didn&#39;t work, inspected element, and then it worked.  What does this mean?

$(document).on(&quot;click&quot;... not working?

I have a link on a web page.  When a user clicks it, a widget on the page should update.  However, I am doing something, because the default functionality (navigating to a different page) occurs before the event fires.  

This is what the link looks like:

    &lt;a href=&quot;store/cart/&quot; class=&quot;update-cart&quot;&gt;Update Cart&lt;/a&gt;

This is what the jQuery looks like:

    $(&#39;.update-cart&#39;).click(function(e) { 
      e.stopPropagation(); 
      updateCartWidget(); 
    });

What is the problem?

How to stop default link click behavior with jQuery

I have a `div` that has `background:transparent`, along with `border`. Underneath this `div`, I have more elements.

Currently,  I&#39;m able to click the underlying elements when I click outside of the overlay `div`. However, I&#39;m unable to click the underlying elements when clicking directly on the overlay `div`. 

I want to be able to click through this `div` so that I can click on the underlying elements.

![My Problem][1]


  [1]: http://i.stack.imgur.com/VDlDa.png

Click through div to underlying elements

I&#39;m trying to trigger click event on hyperlink with jQuery like the way below. Hyperlink does not have any id but it does have css class:

    $(document).ready(function () {  
      $(&#39;.cssbuttongo&#39;).trigger(&#39;click&#39;); 
    }); 

The function above is not working. This is the hyperlink:

    &lt;a href=&quot;hyperlinkurl&quot; class=&quot;cssbuttongo&quot;&gt;hyperlink anchor&lt;/a&gt;


How to trigger click event on href element

I have the following problem with this code:

    &lt;button id=&quot;delete&quot;&gt;Remove items&lt;/button&gt;

    $(&quot;#delete&quot;).button({
         icons: {
                 primary: &#39;ui-icon-trash&#39;
         }
    }).click(function() {
         alert(&quot;Clicked&quot;);
    });

If I click this button, the alert show up two times. It&#39;s not only with this specific button but with every single button I create.

What am I doing wrong?

jQuery Button.click() event is triggered twice

When I click on my `UITableViewCell`, the background part (the areas that my background image doesn&#39;t cover) turns blue when I click on the cell. Also, all of the `UILabel`s on the cell turn to white when it is clicked which is what I want.

However what I do not want is the blue background when I click it but if I do `selectionstylenone`, then I lose the highlighted colours for the `UILabel`s in the cell.

So is there any way to just get rid of the blue background when the cell is clicked but to keep the highlighted colors of the `UILabel`s?

Custom UITableViewCell selection style?

I am trying to simulate a click on on an element.
HTML for the same is as follows

    &lt;a id=&quot;gift-close&quot; href=&quot;javascript:void(0)&quot; class=&quot;cart-mask-close p-abs&quot; onclick=&quot;_gaq.push([&#39;_trackEvent&#39;,&#39;voucher_new&#39;,&#39;cart&#39;,$(this).attr(&#39;rel&#39;)+&#39;-mask_x_button-inaction&#39;]);&quot; rel=&quot;coupon&quot;&gt;&amp;nbsp;&lt;/a&gt;

How can i simulate a click on it. I have tried 

`document.getElementById(&quot;gift-close&quot;).click();`

But its not doing anything

Simulate a click on &#39;a&#39; element using javascript/jquery

How do I click an element in PhantomJS?

    page.evaluate(function() {
        document.getElementById(&#39;idButtonSpan&#39;).click();  
    });

This gives me an error &quot;undefined is not a function...&quot;

If I instead 

     return document.getElementById(&#39;idButtonSpan&#39;);

and then print it,

then it prints [object object], so the element does exist.

The element acts as a button, but it&#39;s actually just a span element, not a submit input.


I was able to get this button click to work with Casper, but Casper had other limitations so I&#39;m back to PhantomJS.

PhantomJS; click an element

I am using `$(&quot;.button&quot;).on(&quot;click&quot;, function(){ });`

to click to a button which is on a container but then an ajax call is done and the content 
gets updated with new stuff and then when i try to click `.button` it wont work... nothing will get returned when i click the button.

I even tried

    $(&quot;.button&quot;).live(&quot;click&quot;, function(){ });

or 

    $(&quot;.button&quot;).click(function(){ });


How can I make it work?

**EDIT :**
my html:

    &lt;div class=&quot;container&quot;&gt;
       &lt;ul&gt;
           &lt;li&gt;item1&lt;/li&gt;
           &lt;li&gt;item2&lt;/li&gt;
           &lt;li&gt;item3&lt;/li&gt;
       &lt;/ul&gt;
       &lt;input type=&quot;button&quot; value=&quot;reload&quot; class=&quot;button&quot; /&gt;
    &lt;/div&gt;

jquery click doesn&#39;t work on ajax generated content

I have a set of dynamically generated anchor tags in a for loop as follows:


    &lt;div id = &quot;solTitle&quot;&gt; &lt;a href = &quot;#&quot;  id = &quot;&#39; + tagId + &#39;&quot; onClick = &quot;openSolution();&quot;&gt; &#39; + solTitle + &#39;&lt;/a&gt;&lt;/div&gt; &lt;br&gt;&#39;;

Once this code is executed the html output for one of the case would look like:

    &lt;div id = &quot;solTitle&quot;&gt; &lt;a href = &quot;#&quot;  id = &quot;solution0&quot; onClick = &quot;openSolution();&quot;&gt;Solution0 &lt;/a&gt;&lt;/div&gt; &lt;br&gt;

    &lt;div id = &quot;solTitle&quot;&gt; &lt;a href = &quot;#&quot;  id = &quot;solution1&quot; onClick = &quot;openSolution();&quot;&gt;Solution1 &lt;/a&gt;&lt;/div&gt; &lt;br&gt;


Now I want different texts to be displayed on clicking the above links.
openSolution() looks like this:

    function openSolution() {
        alert(&#39;here&#39;);
        $(&#39;#solTitle a&#39;).click(function(evt) {
            evt.preventDefault();
            alert(&#39;here in&#39;);
            var divId = &#39;summary&#39; + $(this).attr(&#39;id&#39;);
    
            document.getElementById(divId).className = &#39;&#39;;
    
        });
    }

	


When I execute it and click on either of the &lt;a&gt; links, the flow doesnot come inside the jquery click handler.  I checked it by the above alerts used. It only displays the alert - &#39;here&#39; and not the alert - &#39;here in&#39;. 
On clicking the link second time, everything works perfectly with correct value of divId.



Use jQuery click to handle anchor onClick()

Say there are some elements floating around, and I&#39;m trying to do some when I click ANYTHING(divs, body, whatever...) but the one specified (e.g. div#special).

I&#39;m wondering if there&#39;s a better way to achieve this besides the following method I can think of...

    $(document).bind(&#39;click&#39;, function(e) {
    	get mouse position x, y
    	get the element (div#special in this case) position x, y
    	get the element width and height
    	determine if the mouse is inside the element
    	if(inside)
    		do nothing
    	else
    		do something
    });

jQuery bind click *ANYTHING* but *ELEMENT*

&gt; **Second update:** Looks like one of my functions (resetFigures) was preventing the event handler, so moving that to the end of the bind function sorted it out.
&gt;
&gt; **Update:** I realized after some basic testing that the click events were registering, it&#39;s just that the box fails to flip when tapped.

I have the basic aesthetic functionality of my site working in Chrome and Firefox, but it refuses to behave properly on iOS (test on iPhone 4 with iOS 6.1 and iPad with iOS 4.3.5).

You can view the site and of course the scripts (main.js) here: http://bos.rggwebdesigns.com/

I&#39;ve read that iOS doesn&#39;t really handle jQuery click events properly, but I&#39;m struggling to figure out a fix. A couple threads here on Stack Overflow mentioned the live() method, but implementing it like follows (as well as adding `onclick=&quot;&quot;` to the clickable elements) didn&#39;t seem to work:

    $(&#39;.card&#39;).live(&#39;click touchstart&#39;, function() {
            var figure = $(this).children(&#39;.back&#39;);
            var button = figure.find(&#39;.button&#39;);
            var column = $(this).parents().eq(1);
            $(&#39;.column&#39;).removeAttr(&#39;style&#39;);
            column.css(&#39;z-index&#39;, 2000);
            resetFigures();
            if(flipCard(this)){
                swoosh.pause();
                swoosh.currentTime = 0;
                swoosh.play();
            }
        });

I also came across this interesting workaround project: http://aanandprasad.com/articles/jquery-tappable/. 
However, I had no luck with that either:

    $(&#39;.card&#39;).tappable(function() {
            var figure = $(this).children(&#39;.back&#39;);
            var button = figure.find(&#39;.button&#39;);
            var column = $(this).parents().eq(1);
            $(&#39;.column&#39;).removeAttr(&#39;style&#39;);
            column.css(&#39;z-index&#39;, 2000);
            resetFigures();
            if(flipCard(this)){
                swoosh.pause();
                swoosh.currentTime = 0;
                swoosh.play();
            }
        });

Also, please correct me if I&#39;ve been mislead, but according to this site, 3D transforms are supported in iOS with the appropriate prefixes: http://caniuse.com/transforms3d

jQuery click events not working in iOS

How can I turn off the orange highlight when clicking an item in a GridView?

I haven&#39;t been able to find a solution in the documentation or through testing.

Android: Disable highlighting in GridView

I have a wpf button like this:

    &lt;Button Click=&quot;button1_Click&quot; Height=&quot;23&quot; Margin=&quot;0,0,5,0&quot; Name=&quot;button1&quot; Width=&quot;75&quot;&gt;Initiate&lt;/Button&gt;

And I want to pass `{Binding Code}` passed as parameter to the button1_click handler.  
How do I go about this?

_Disclaimer: really new to WPF_

Add parameter to Button click event

I&#39;m attempting to write a video poker game in Javascript as a way of getting the basics of it down, and I&#39;ve run into a problem where the jQuery click event handlers are firing multiple times.

They&#39;re attached to buttons for placing a bet, and it works fine for placing a bet on the first hand during a game (firing only once); but in betting for the second hand, it fires the click event twice each time a bet or place bet button is pressed (so twice the correct amount is bet for each press).  Overall, it follows this pattern for number of times the click event is fired when pressing a bet button once--where the *ith* term of the sequence is for the betting of the *ith* hand from the beginning of the game: 1, 2, 4, 7, 11, 16, 22, 29, 37, 46, which appears to be n(n+1)/2 + 1 for whatever that&#39;s worth--and I wasn&#39;t smart enough to figure that out, I used [OEIS](http://oeis.org/). :)

Here&#39;s the function with the click event handlers that are acting up; hopefully it&#39;s easy to understand (let me know if not, I want to get better at that as well):

    /** The following function keeps track of bet buttons that are pressed, until place button is pressed to place bet. **/
    function pushingBetButtons() {
	    $(&quot;#money&quot;).text(&quot;Money left: $&quot; + player.money); // displays money player has left
	
	    $(&quot;.bet&quot;).click(function() {
		    var amount = 0; // holds the amount of money the player bet on this click
		    if($(this).attr(&quot;id&quot;) == &quot;bet1&quot;) { // the player just bet $1
			    amount = 1;
		    } else if($(this).attr(&quot;id&quot;) == &quot;bet5&quot;) { // etc.
			    amount = 5;
		    } else if($(this).attr(&quot;id&quot;) == &quot;bet25&quot;) {
			    amount = 25;
		    } else if($(this).attr(&quot;id&quot;) == &quot;bet100&quot;) {
			    amount = 100;
		    } else if($(this).attr(&quot;id&quot;) == &quot;bet500&quot;) {
			    amount = 500;
		    } else if($(this).attr(&quot;id&quot;) == &quot;bet1000&quot;) {
			    amount = 1000;
		    }
		    if(player.money &gt;= amount) { // check whether the player has this much to bet
			    player.bet += amount; // add what was just bet by clicking that button to the total bet on this hand
			    player.money -= amount; // and, of course, subtract it from player&#39;s current pot
			    $(&quot;#money&quot;).text(&quot;Money left: $&quot; + player.money); // then redisplay what the player has left
		    } else {
			    alert(&quot;You don&#39;t have $&quot; + amount + &quot; to bet.&quot;);
		    }
	    });
	
	    $(&quot;#place&quot;).click(function() {
		    if(player.bet == 0) { // player didn&#39;t bet anything on this hand
			    alert(&quot;Please place a bet first.&quot;);
		    } else {
			    $(&quot;#card_para&quot;).css(&quot;display&quot;, &quot;block&quot;); // now show the cards
			    $(&quot;.card&quot;).bind(&quot;click&quot;, cardClicked); // and set up the event handler for the cards
			    $(&quot;#bet_buttons_para&quot;).css(&quot;display&quot;, &quot;none&quot;); // hide the bet buttons and place bet button
			    $(&quot;#redraw&quot;).css(&quot;display&quot;, &quot;block&quot;); // and reshow the button for redrawing the hand
			    player.bet = 0; // reset the bet for betting on the next hand
			    drawNewHand(); // draw the cards
		    }
	    });
    }

Please let me know if you have any ideas or suggestions, or if the solution to my problem is similar to a solution to another problem on here (I&#39;ve looked at many similarly titled threads and had no luck in finding a solution that could work for me).

jQuery click events firing multiple times

I would like to know if it was possible to detect the double-click in JavaFX 2 ? and how ?

I would like to make different event between a click and a double click.

Thanks

Javafx 2 click and double click

I know this question has been asked before, but after a search on the web I can&#39;t seem to find a straight forward answer.

**the HTML**

    &lt;a id=myAnchor href=index.php&gt;

**the jQuery** (Both of these do not work)

     $(&#39;#myAnchor&#39;).click();

or 

    $(&#39;#myAnchor&#39;).trigger(&#39;click&#39;);

What is the simplest and most efficient way to achieve this?

All Click Solutions on Gang of Coders

Total of 46 Click Solutions