jquery click event doesn't work

Question

I wrote this code , and I need to handle click events with jquery , but it doesn't work in any browser , when I click any elements nothing happens. The divs has no z-index in css;

The hole "news" element adds dynamically This is html code

<div class="news">
            <div class="meta-inform">
                <div id="waiting">not accepted</div>
                <div id="accpted">accepted</div>

                <div class="edit">
                <div class="editedBy" id="editedBy" >
                    <div id="editLabel"  style="display:inline">edited by</div>
                    <div id="editorName"  style="display:inline">arvin</div>
                </div>

                <div id="editTime" class="editTime">
                    <div id="editDate" style="display:inline" >چdate</div>
                    <div id="editDate" style="display:inline">time</div>
                </div>
                </div>

            </div>

        <div id="littleNews">
            <div id="number">1000</div>
            <div id="divider1"></div>
            <div id="title">title</div>
            <div id="divider2"></div>
            <div id="littleNewsTime">time</div>
            <div id="littleNewsDate">date</div>
            <div id="divider3"></div>
            <div id="category">cat</div>
            <div id="part">part</div>
            <div id="segment">sgmnt</div>
            <div id="divider4"></div>
            <div id="writer">writer</div>
            <div id="view">view post</div>
        </div>

        <div class="functions">
            <div id="edit">edit</div>
            <div id="delete">delete</div>
            <div id="accptThis">accept</div>
        </div>
        </div>

and this is my jquery codes

$(document).ready(function () {
    $("#littleNews").click(function () {
        alert("hi");
    });
});

and it doesn't works for any element in "news" class

I have this code and this code creates the whole div

$("#news").clone().appendTo("#mainDiv").attr("id","news"+(i+1))

The question writes *doesn't works for any element in "news" class*. The jQuery code does not reference *.news* at all. is this the issue? — JNF, Nov 06 '13 at 08:03
thanks for your attention , yes the whole news element added dynamically — arvin karimi, Nov 06 '13 at 08:05
Might be a stupid thing here, however, do you have JS enabled in the tested browsers? The code seems fine, no syntax errors valid ID being given. What you could do is check if `#littleNews` exists. `if ($('#littleNews').length > 0) console.log(exists); //jquery uses objects which length can be obtained.` — SidOfc, Nov 06 '13 at 08:08

jfriend00 · Accepted Answer · 2013-11-06T08:16:04.373

75

Your code and HTML works just fine here in a jsFiddle as you've shown it. So, it is not an issue with those things exactly as you've shown them. It is more likely something with the environment in your page or dynamic HTML. Some possibilities:

Your HTML elements are added dynamically AFTER you install the event handler.
You don't have jQuery installed properly.
You have a script error that prevents other scripts from running.
You have duplicate IDs somewhere in your page.
You aren't using the right selector (perhaps you want ".news")

If your HTML is added dynamically after the event handlers are installed, then you need to use delegated event handling like this:

$(document).ready ( function () {
    $(document).on ("click", "#littleNews", function () {
        alert("hi");
    });
});

Tip: $(document) should actually be the closest parent to #littleNews that is not dynamically created after the event handler is installed. I don't know what that is so I picked the safest $(document), but things perform better (particularly if you have lots of delegated event handlers) if you use the closest static parent.

It's unclear from your question, but if you also want your event handler to cover everything in .news, you would need to change your selector to cover that.

edited Nov 06 '13 at 08:16

answered Nov 06 '13 at 08:03

jfriend00

683,504
96
985
979

Pro tip, you can avoid the 'you must use code' thing by back-ticking something. – azz Nov 06 '13 at 08:08
thanks friends , i think it's because number 4 you said ; i have this code "$("#news").clone().appendTo("#mainDiv").attr("id","news"+(i+1))" befor ,and i can't delete it , is there a way to fix clicking? – arvin karimi Nov 06 '13 at 08:17
@arvinkarimi - put a common class name on all the items you want to work for a particular event handler and then use delegated event handling with that class name. Assuming mainDiv is not dynamically created and you put the `"newsItems"` class on each cloned item, then you could do something like this: `$("#mainDiv").on("click", ".newsItems", fn)` – jfriend00 Nov 06 '13 at 08:54
@jfriend00 I had the same problem and you solved it! My elements were created after the event handler was installed, but I don´t understand... is not this `$(document).ready` the same as `defer` attribute on the script tag? I had to use both to make my code work but I thought it was the same! – Apr 05 '18 at 00:03
1

@FranP - We'd have to understand your specific situation in more detail to advise and a comment here is not the right place to discuss it. `$(document).ready()` and the `defer` attribute are certainly not the same thing at all. – jfriend00 Apr 05 '18 at 00:09

score 2 · Answer 2 · answered Nov 06 '13 at 09:11

2

try something like this

            $(document).on('click','#littleNews',function () {
                alert("hi");
            });

answered Nov 06 '13 at 09:11

rajesh kakawat

10,826
1
21
40

score 0 · Answer 3 · edited Nov 06 '13 at 08:01

0

I tested your code, and its worked.

I think u dont remember added jquery.

$("#littleNews").click (function(){
 alert("hi");
});

Demo

edited Nov 06 '13 at 08:01

Amit

15,217
8
46
68

answered Nov 06 '13 at 08:00

mehmetakifalp

445
5
16

score 0 · Answer 4 · answered Nov 06 '13 at 08:01

0

Try this,

$(function () {
   $("#littleNews div").on('click',function () {
      alert($(this).text());
   });
});

Demo

answered Nov 06 '13 at 08:01

Rohan Kumar

40,431
11
76
106

If you're taking that approach you may as well delegate the `div`, with `$("#littleNews").on('click','div', fn)` – azz Nov 06 '13 at 08:02
@jfriend00 The only reason to really switch from `click` to `on` is to add delegation, for dynamic content. In this case if the `#littleNews` is static and it's children are dynamic. – azz Nov 06 '13 at 08:07
@DerFlatulator - it now appears (based on OP's comments) that perhaps `#littleNews` is dynamic. I've added a delegated solution to my answer to handle that. – jfriend00 Nov 06 '13 at 08:12

score 0 · Answer 5 · answered Nov 06 '13 at 08:04

0

You ask about "news" class. the code you posted doesn't reference it in any way.

Perhaps you want this?

$(document).ready(function () {
    $("#littleNews, .news").click(function () {
        alert("hi");
    });
});

fiddle

answered Nov 06 '13 at 08:04

JNF

3,696
3
31
64

Depends how you define "working fine". Look at the end of the question. The code works, but the result may not be what OP is looking for. – JNF Nov 06 '13 at 08:07
Well, then you should add words to your answer that explain what problem you're trying to solve. Pure code with no explanation for why is a lot less useful and a lot less clear to others what you're trying to do. – jfriend00 Nov 06 '13 at 08:14

score 0 · Answer 6 · answered Oct 15 '18 at 11:07

Make sure you did not forgot to add jQuery library to html file. If it happened adding it from google or microsoft cdn in the <head> </head> as follows solves the issue.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

score -1 · Answer 7 · answered Nov 06 '13 at 09:08

-1

Probably one of the div tags falling on littlenews div.

for test:

set (border:1px red solid) for all div.

hope help you.

answered Nov 06 '13 at 09:08

azadeh noorzad

20
3

jquery click event doesn't work

7 Answers7

Linked