如何在新标签页/链接中打开预先放置的div？

Question

How can I make a div open a new link when it has a function or onclick hooked to it? I've been trying the following below but nothing seems to work, tbe div never includes the new link.

jQuery.prepend('<div class="dropdown">' + r + closer + "</div>"))

I've tried adding javascript to make the bugme class include a new link but no luck so far..

jQuery(".dropdown").on("click", function(e) {
    location.href = "www.google.com.com";
}

I also tried including onclick="location.href='http://www.google.com';" in the code but it did not work, why doesn't the following code allow a new link?

Answer 1

Since your .dropdown is dynamically added element you need what is called event delegation . And instead of location.href use window.open . So write click event as below:

jQuery(document).on("click",".dropdown", function(e) {
    window.open('http://www.google.com', '_blank')
}

Answer 2

 $('body').append($('<div class="dropdown">Click me</div>')); jQuery(".dropdown").on("click", function(e) { location.href = "www.google.com.com"; }); 

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

this also worked try it

Answer 3

FYI;
This code doesnot work

jQuery(".dropdown").on("click", function(e) {
    location.href = "www.google.com.com";
}

Reason:
the jQuery have no idea of any element with class dropdown since it is inserted in runtime and the event handler for newly added item is not assigned.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

Here the document object is guaranteed to be present always.

jQuery(document).on("click", ".dropdown", function(e) {