0

I have the following jquery code to trigger a click event:

 $(document).on('click','#button1, #button2',function(e){
     console.log(e.target.id);
    
     if (e.target.id == 'button1') {
         $( "#widgetA .closeresults" ).trigger( "click" );
     }
     else {
         $( "#widgetB .closeresults" ).trigger( "click" );
     }
 });

The trigger event should fire the following code however e.target.id is always empty:

 $(document).on('click','#widgetA .closeresults, #widgetB .closeresults',function(e){
      console.log(e.target.id)
      if (e.target.id == 'widgetA') {
          //do something
      }
      else {
         // do something else
      }
      
 });

How do i get the id of the element that initiated the trigger event?

*** UPDATE ***

If button1 is clicked then I want the trigger click event which calls the second snippet of code to return widgetA as the target.id as that is what I'm using to trigger the event. How can I achieve this.

adam78
  • 9,668
  • 24
  • 96
  • 207
  • Could you include your HTML as well? – Wimanicesir Jan 05 '23 at 14:08
  • Unable to replicate - your code works fine: https://jsfiddle.net/5vgLb9u6/ – Rory McCrossan Jan 05 '23 at 14:08
  • Why do you need to compare the ID? Just check if the clicked element is contained by another element matching a specific selector: `if($(e.target).closest("#widgetA").length)`. If you just need the element with the ID, use `$(e.target).closest("[id^=widget]")`. A class unifying `widgetA` and `widgetB` would be much more straightforward. – Sebastian Simon Jan 05 '23 at 14:10
  • 1
    @RoryMcCrossan thats not all the code from the OP, I think the buttons are supposed to trigger another click on 2 additional buttons – Chris G Jan 05 '23 at 14:10
  • @RoryMcCrossan It’s the _second_ code snippet that isn’t working. – Sebastian Simon Jan 05 '23 at 14:11
  • the e.target.id might be empty because the element closeresults do not have id – josefdclxvi Jan 05 '23 at 14:12
  • @RoryMcCrossan your fiddle is not the same as the code I've provided - it is missing the second snippet of code which is where the issue lies. – adam78 Jan 05 '23 at 14:14
  • @ChrisG you're right - I jumped the gun copying the fiddle URL, but it still works: https://jsfiddle.net/5vgLb9u6/1/ – Rory McCrossan Jan 05 '23 at 14:14
  • @adam78 see reply above. You need to edit the question to create a snippet which demonstrates this issue, as the code you've shown is not the cause. – Rory McCrossan Jan 05 '23 at 14:15
  • @RoryMcCrossan _“but it still works”_ — No, `e.target.id == 'widgetA'` will never be `true` in your example; `e.target.id` will only be `"foo"` or `"bar"`, which isn’t useful here. – Sebastian Simon Jan 05 '23 at 14:17
  • @SebastianSimon obviously, however the problem the OP states is that 'however e.target.id is always empty' which is demonstrably not the case. Their selector/DOM traversal just needs to be updated. The issue is in the HTML which they haven't shown in the question. My response was a, perhaps too subtle, attempt to make the OP think the basic issue through some more. Lead a horse to water, etc. – Rory McCrossan Jan 05 '23 at 14:18
  • 1
    Probbaly because you are clicking on an element without an id. The id is on a parent. `e.target.closest("[id]")` We really need HTML to debug your issue. – epascarello Jan 05 '23 at 14:20
  • @RoryMcCrossan your code returns foo or bar as the target id instead of widgetA or WidgetB. If button1 is clicked the trigger event should return widgetA as the target id. – adam78 Jan 05 '23 at 14:22
  • @SebastianSimon `foo` and `bar` those are just id examples that Rory used. The HTML with the DOM elements nodes were not provided so we can't 100% tell what the problem really is and how to solve it. Just replace them with `widgetA` and `WidgetB` that helps you solve it – Chris G Jan 05 '23 at 14:22
  • Related: [jQuery: How to determine the parent container element id](/q/8159397/4642212). – Sebastian Simon Jan 05 '23 at 14:23

0 Answers0