-1

I've got a ul with let's say 10 li elements. Inside every li elemenet there is img that on click is opened in modal. I want to make a function that when you send someone a link to specific img (let say www.aaa.com/#/image/3) to open the third image. So far I don't have any success. On the list I've got: $(document).on('click', 'li img', function(){ ... } Here is the question how to simulate specific img click event, cuz I've made this modal to work with this, it's not very specific like number 3 from the url.

ps I don't want to use server side, that's why I'm using #.

Georgi Stoyanov
  • 469
  • 1
  • 5
  • 24
  • Possible duplicate of [jQuery.click() vs onClick](http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) – Binit Ghetiya Jan 02 '17 at 13:15
  • Please provide a [mcve] – zer00ne Jan 02 '17 at 13:15
  • please refer http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick for click functions in both javascript and jquery – Binit Ghetiya Jan 02 '17 at 13:15
  • aren't you missing 'ready' in your code: $(document).on('click', 'li img', function(){ ... } – Ankush G Jan 02 '17 at 13:16
  • I need to make this clarifications - output.jsbin.com/lipahudaxe (on the top right there is edit in jsbin). And the thing that I'm trying right now is when you receive the link, try to trigger click on the specific img and not copy paste the code. I'm doing this in other function, called on the loading of the site: function setupImage (imgIndex) { .... var total = $('ul.images-list li').length + 1; if(imgIndex <= total) { $('li img').eq(imgIndex).trigger('click'); } } Because of the using of hashes and other function, the problem was not exact same as in the mentioned by Binit. – Georgi Stoyanov Jan 02 '17 at 21:16

3 Answers3

3

You can use document.location.hash to get the current hash from the link, and if there is a hash, and it's an image - trigger the click on that image:

$(function() { // on page load
  var hash = document.location.hash;
  if (hash) { // check if hash exists
    m = hash.match(/#\/image\/(\d+)/) // check the structure
    if (m) {
      $('ul#specific-ul li img').eq(m[1] - 1).click() // trigger click on the relevant image
    }
  }
})
Dekel
  • 60,707
  • 10
  • 101
  • 129
  • That's what I'm doing. But when you receive a link, I've made a simple switch method to check what is the link and if it's a image, it should be opened modal with that image. The thing is that `$('li img').eq(imgIndex).trigger('click');` doesn't work. I don't know why. I've got attached event listener to the li img, but it still doesn't make the click event :| – Georgi Stoyanov Jan 02 '17 at 15:33
  • Can you create an example of what you are doing? Without a working example it will be hard to help – Dekel Jan 02 '17 at 15:56
  • https://output.jsbin.com/lipahudaxe (on the top right there is edit in jsbin). And the thing that I'm trying right now is when you receive the link, try to trigger click on the specific img and not copy paste the code. I'm doing this in other function, called on the loading of the site: `function setupImage (imgIndex) { .... var total = $('ul.images-list li').length + 1; if(imgIndex <= total) { $('li img').eq(imgIndex).trigger('click'); } }` – Georgi Stoyanov Jan 02 '17 at 16:44
  • Read again my code and see what what is the differences between what I wrote and where you put the code inside your page. – Dekel Jan 02 '17 at 16:46
  • It doesn't work, mate, I don't know why :| It's something very stupid and lame, cuz I've tried it :| Btw I've added some information in the comment above – Georgi Stoyanov Jan 02 '17 at 16:47
  • Copy the **exact** code I wrote and put it in you javascript source (**not** inside some other function). – Dekel Jan 02 '17 at 16:48
  • Did you check and fix? – Dekel Jan 02 '17 at 18:11
  • It works, but there is question - why? When it's in function - doesn't work, when it's not it works? Is there something like attaching event handler is not global and other functions can't use it? – Georgi Stoyanov Jan 02 '17 at 21:14
  • You put it inside the `click` event - so the will not work **until** you click on the element. – Dekel Jan 02 '17 at 21:14
1

To trigger click event you use $('#image3').trigger('click')

Justinas
  • 41,402
  • 5
  • 66
  • 96
0

Use the ID attribute. if you have added your li in a loop thn take a variable append it with id in loop. don't forget to do variable++.

When you will click on the image like with id = image5 you can use this $("#image5").click(function(){ // Do something });

usman rehman
  • 1