jQuery id-begins-with trigger not working

Question

I am having a very strange thing happening to me. I have never seen this before. I am not very knowledgeable in jQuery/Javascript, but to my untrained eye, this looks insane...

What is happening is that without the alert('hello') under the $(document).ready function, the ID-begins-with selector does not trigger (i.e., does not alert the "goodbye"). If I add the alert('hello') below the $(document).ready) function, suddenly, the alert('goodbye') words.

How is this possible?

<script type="text/javascript">
    $(document).ready(function(){
        alert('hello');
        $('a[id^="hash-"]').click(function(e){
            e.preventDefault();
            alert('goodbye');
        });
    });
</script>

I have also tried with .on():

<script type="text/javascript">
    $(document).ready(function(){
        alert('hello');
        $('a[id^="hash-"]').on('click', function(e){
            e.preventDefault();
            alert('goodbye');
        });
    });
</script>

The HTML element is initially added on page load, but can be changed if you filter the bootgrid table, hence I changed it to .on() as suggested in the comments.

<td>
    <a id="hash-1" href="#" data-row-id="1">
        <i class="zmdi zmdi-arrow-left-bottom" title="Select this site"></i>
    </a>
</td>

I then tried this (because the original <td> where the icon resides is also dynamically created):

$(document).on('click', 'a[id^="hash-"]', function(e){
    e.preventDefault();
    alert('goodbye');
});

Also unsuccessful...

Any help would be greatly appreciated.

Check if the event is actually bound to the element. Use the `on` method instead of `click` if you need to delegate events — Isabel Inc, Aug 11 '16 at 14:29
Are the elements being added dynamically? My instinct says "yes" — epascarello, Aug 11 '16 at 14:29
The only reason I could see this happening is if the elements are appended to the DOM after the page loads. In which case you need to use a delegated event handler: `$(document).on('click', 'a[id^="hash-"]', fn);` — Rory McCrossan, Aug 11 '16 at 14:30
http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Aug 11 '16 at 14:31
`$('a[id^="hash-"]').click(function(){})` and `$('a[id^="hash-"]').on('click', function(){})` are the same thing. — epascarello, Aug 11 '16 at 14:38
Edited the question to show what I have tried based on the comments, and still not working :-( Thanks for the comments so far! — Kobus Myburgh, Aug 11 '16 at 14:46
`$('a[id^=hash]').click(function(e){ e.preventDefault(); alert('goodbye'); });` please try this code @KobusMyburgh — ubm, Aug 11 '16 at 15:03
oh ..it works for me,did you include jquery library properly?@KobusMyburgh — ubm, Aug 11 '16 at 15:09
@ubm if you read the question properly, you will see that it does work in certain cases, so yes, my jQuery is loaded properly. — Kobus Myburgh, Aug 11 '16 at 15:10
are the rows and links loaded dynamically(after loading page)@KobusMyburgh — ubm, Aug 11 '16 at 15:29
@epascarello, thanks - I have changed the question accordingly after your last comment to use .on() properly (I think). I am still not getting it to work? — Kobus Myburgh, Aug 11 '16 at 15:31
i think, newly added elements doesn't get this function@KobusMyburgh — ubm, Aug 11 '16 at 15:40
`$(document).on('click', 'a[id^="hash-"]', fn);` as posted above by @RoryMcCrossan — epascarello, Aug 11 '16 at 15:41
@epascarello I have edited the question, particularly the part at the 4th code block. Doing what Rory McCrossan and you said. I am still not getting it to work :-( — Kobus Myburgh, Aug 11 '16 at 15:47
@epascarello, thank you - that (`$('table tbody')`) worked, but `$(document)` did not. Not sure why, but if you post your comment as an answer, I will accept it. — Kobus Myburgh, Aug 11 '16 at 15:56

Haresh Vidja · Answer 1 · 2016-08-12T04:54:16.230

-3

This is working fine for me.

$(document).on('click','a[id^="hash-"]',function(e){
  e.preventDefault();
  alert('goodbye' + $(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <a id="hash-1">1</a> 
    <a id="hash-2">2</a> 
    <a id="hash-3">3</a> 
    <a id="hash-4">4</a>

edited Aug 12 '16 at 04:54

answered Aug 11 '16 at 14:33

Haresh Vidja

7,750
3
22
40

2

because your code is executing after the elements are on the page. – epascarello Aug 11 '16 at 14:39
@epascarello, I have applied delegation click even with on() method no remove down vote please – Haresh Vidja Aug 12 '16 at 04:56

jQuery id-begins-with trigger not working

1 Answers1