My code is not working without an alert(); function in the start

Question

I am trying to fire a :click(); function but unable to do that I don't know why but when I type the :alert(); function in start then my code works I am stuck in this situation.

I search over internet but no success.Any help from you is very appreciable.

HTML:

<div class="edit-options-dated">
    <span><?php echo date('H:i:m', (time()-strtotime($note->getCreationDatetime()))); ?></span>         
    <ul class="pull-right edit-task-icons">
        <li class="delete-task"><i class="fa fa-trash-o"></i></li>
        <li class="edit-task"><i class="fa fa-pencil"></i></li>
        <li class="setting-task"><i class="fa fa-cog"></i></li>
    </ul>
    <ul class="settings-task-options">
        <h3>note groups</h3>    
        <li><a href="#">new</a></li>
        <li><a href="#">Affiliate Tasks</a></li>
        <li><a href="#">next week</a></li>
    </ul>
</div>

JQuery:

$(window).load(function() {

// alert('ok');

$('li.setting-task').on('click', function() {

    $(this).parent().parent().find('.settings-task-options').toggle();

});

$('li.delete-task').click(function() {

    $('.delete-2').slideDown();

});

});

Can you debug this a little? When you attach the event handlers, are any matching elements found at all? Is the click handler executing but simply not finding elements to modify? Where/how specifically is this failing? — David, Feb 03 '16 at 20:53
Does it work if you use `$(document).ready()` instead of `$(window).load()`? — Barmar, Feb 03 '16 at 20:54
@Barmar yes I already tried the solution you mentioned but no success — qarar, Feb 03 '16 at 20:58
@qarar: Your code works just fine: https://jsfiddle.net/zg7kmhpb/ Can you demonstrate some way to replicate the problem? — David, Feb 03 '16 at 21:01
@David I check all the method but JTC method works for me do you know why? — qarar, Feb 03 '16 at 21:07
Are you loading any of the elements into the DOM dynamically? — Barmar, Feb 03 '16 at 21:17

score 2 · Answer 1 · edited May 23 '17 at 12:24

2

instead of $(window).load(); you can use

$(document).ready(function(){
    // code here
});

or

$(function(){
  //code here
});

may be you need to Event binding on dynamically created elements?

$(document).ready(function(){

// alert('ok');

 $('body').on('click','li.setting-task', function() {

      $(this).parent().parent().find('.settings-task-options').toggle();

  });

  $('body').on('click','li.delete-task',function() {

    $('.delete-2').slideDown();

  });

});

edited May 23 '17 at 12:24

Community

1
1

answered Feb 03 '16 at 20:54

Mohamed-Yousef

22,772
3
17
27

3

`$(window).on('load', ...)` is the same as `$(window).load(...)`. – Barmar Feb 03 '16 at 20:55
@Barmar This is not .. I just remember I used it before and its not the same ..I really don't remember well where and how but that's it may be in another case than this.. but to not make OP confused about it .. I deleted it .. – Mohamed-Yousef Feb 03 '16 at 21:00
No success @Mohamed-Yousef – qarar Feb 03 '16 at 21:02
Thanks for solution @Mohamed-Yousef – qarar Feb 03 '16 at 21:14

JTC · Accepted Answer · 2016-02-03T21:07:57.107

1

You can try this...

$(function(){ // shorthand for document ready - document is safely loaded
    $(document.body).on('click', 'li.setting-task' ,function(e){
      $(this).parent().parent().find('.settings-task-options').toggle();
    });
  });

JQuery on - info here

document.body basically search the body part of your document for select element and makes event for it

edited Feb 03 '16 at 21:07

answered Feb 03 '16 at 21:00

JTC

2,975
3
26
43

this works very happy with solution but can you describe this because I never use this method – qarar Feb 03 '16 at 21:05
Thanks for your help very appreciated – qarar Feb 03 '16 at 21:11

My code is not working without an alert(); function in the start

2 Answers2