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
– JNF, Commented Nov 6, 2013 at 8:03
thanks for your attention , yes the whole news element added dynamically — arvin karimi
– arvin karimi, Commented Nov 6, 2013 at 8:05

jfriend00 · Accepted Answer · 2013-11-06 08:16:04Z

76

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 6, 2013 at 8:16

answered Nov 6, 2013 at 8:03

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

azz Over a year ago

Pro tip, you can avoid the 'you must use code' thing by back-ticking something.

arvin karimi Over a year ago

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?

jfriend00 Over a year ago

@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)

user6791921 Over a year ago

@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!

jfriend00 Over a year ago

@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.

rajesh kakawat · Accepted Answer · 2013-11-06 09:11:41Z

2

try something like this

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

answered Nov 6, 2013 at 9:11

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Comments

Rohan Kumar · Accepted Answer · 2013-11-06 08:01:31Z

0

Try this,

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

Demo

answered Nov 6, 2013 at 8:01

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

3 Comments

azz Over a year ago

If you're taking that approach you may as well delegate the div, with $("#littleNews").on('click','div', fn)

azz Over a year ago

@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.

jfriend00 Over a year ago

@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.

JNF · Accepted Answer · 2013-11-06 08:04:45Z

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 6, 2013 at 8:04

JNF

3,7403 gold badges35 silver badges65 bronze badges

2 Comments

JNF Over a year ago

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.

jfriend00 Over a year ago

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.

Tadele Ayelegn · Accepted Answer · 2018-10-15 11:07:02Z

0

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>

answered Oct 15, 2018 at 11:07

Tadele Ayelegn

4,8622 gold badges39 silver badges32 bronze badges

Comments

user27921668 · Accepted Answer · 2024-11-12 09:34:17Z

0

I've tested your code, and it's working.

I think you have forgot to add the jquery.

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

Demo

edited Nov 12, 2024 at 9:34

user27921668

23 bronze badges

answered Nov 6, 2013 at 8:00

mehmetakifalp

4556 silver badges16 bronze badges

Comments

azadeh noorzad · Accepted Answer · 2013-11-06 09:08:49Z

-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 6, 2013 at 9:08

azadeh noorzad

203 bronze badges

Collectives™ on Stack Overflow

jquery click event doesn't work

7 Answers 7

5 Comments

Comments

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related