#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    48
    Rep Power
    14

    $("img").click(function() not working


    I am reading data from a MySQL database via AJAX PHP and PDO and place the data and its image in a card which is working.
    When I added the following code to eventually have a modal pop up with a larger version of the image

    Code:
     $("img").click(function(){
      alert("it works!");
     });
    I am get nothing with clicking on an image. Shouldn't the alert appear when I click on any of the images?
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,435
    Rep Power
    9645
    It only applies to elements that existed when it was executed. If you add images with Javascript then they will not get the click handlers.

    Use .on on a parent element of all images, both current and future, with a selector to filter the event to just the images.
    javascript Code:
    $("#parent-element").on("click", "img", function() {
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    48
    Rep Power
    14
    changed to
    Code:
    $(".card").on("click", "img", function() {
      alert("it works!");
     });
    and have the HTML for the card section within a PHP foreach loop going thought the results set from the database

    [CODE

    <div class="card">
    <img class="card-img-top" src="<?php echo $record['thumbnail'];?>" alt="<?php echo $record['thumbnail'];?>">
    <div class="card-block">
    <h4 class="card-title"><?php echo $record['setname'];?></h4>
    <p class="card-text"><?php echo $record['setImgCount'];?> images in set.</p>
    </div>
    </div>

    [/CODE]

    and still nothing seems to happen. How would I debug this? When I tried to use Firebug with Firefox and click on the Script tag
    I get a "No javascript on this page" messsage.

    I checked and have downloaded the latest version from jQuery.
    Last edited by artoo; August 18th, 2017 at 12:33 AM.
  6. #4
  7. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,435
    Rep Power
    9645
    Presumably "no Javascript on this page" means there isn't any Javascript on the page. Are you sure you're putting the code into the right place? Or maybe Firebug means no inline scripts and you're using external files (<script src>)?

    What's all the code for the page?
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    279
    Rep Power
    37
    Try to use Firefox native / internal debugger "Web Console" and just remove Firebug?
    The former is advanced enough (to my opinion) to test / find any kinds of client side bug.
    Activation key: CTRL-SHIFT-K

    As for "No javascript on this page": that seems to be Firebug specific message? Odd
    AFAIK the only way to turn off / on javascript is through another built-in tool called "Developer Toolbar".
    Activation key: SHIFT-F2 and just type "pref set javascript.enabled false".
    I use this too, but only sometimes.... very rarely.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    48
    Rep Power
    14
    i placed the Javascript in <script> </script> tags at the end of the file just above the </body> tag. I've gotten the same message when trying to use Firebug with other files that use inline scripts with the <script>
    tags in the <head> section and external files using the <script src> tags.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2017
    Posts
    7
    Rep Power
    0
    PHP Code:
    $(document).ready(function () {
        
    // your binding funcitions
    }); 

IMN logo majestic logo threadwatch logo seochat tools logo