如何同时调用onclick和href

Question

  boilerPalte.activityStream = 
                            "<div class='socvid-aspect-ratio-container'>"+
                                "<div onclick='com.ivb.module.home.pics.showDialogBox(\"{%=nodeId%}\",\"{%=classNameId%}\")'>"+
                                    "<a href = {%=centerUrl%}>"+
                                    "<img src='{%=imageUrl%}'>"+
                                    "</a>"+
                                "</div>"+
                            "</div>";

I want that showDialogBox function be be executed when i click the div and in the same time the a href to work. In the code above the onclick does not work, only a href works. I want an ajax request to occur (and presumably actually succeed) and then for the browser to go ahead and locate to the link specified in the anchor tag

Answer 1

In onclick function lets say clickme, on successful completion of ajax request write down the location of the page you wanted to redirect.

for eg.

function clickme()
{
$.get("service",{data},function(){
 location.href="www.abc.com";
});
}

Answer 2

call a onclick from div and redirect to the particular page from function using location.href

boilerPalte.activityStream = 
                            "<div class='socvid-aspect-ratio-container'>"+
                                "<div onclick='return com.ivb.module.home.pics.showDialogBox(\"{%=nodeId%}\",\"{%=classNameId%}\",\"{%=centerUrl%}\")'>"+
                                    "<img src='{%=imageUrl%}'>"+
                                    "</div>"+
                            "</div>";

in showDialogBox use location.href

Answer 3

For my knowledge you can just do the following.

<div href="your href here" onclick="and your function">

Or am i not correctly understanding your question?

Answer 4

This will work for you:

com.ivb.module.home.pics.showDialogBox = function(nodeId, classNameId, obj) {

    // something ...

    var href = $(obj).find('a').data('href');
    makeAjaxRequest().success(function() {
        location.href = href;
    });
};

HTML:

 <div onclick='com.ivb.module.home.pics.showDialogBox(\"{%=nodeId%}\",\"{%=classNameId%}\", this)'>
     <a data-href={%=centerUrl%}>
         <img src='{%=imageUrl%}'>
     </a>
 </div>

With data-href instead of href you don't need to prevent default event on your link. If you want to use href make sure you e.preventDefault on this link.

Answer 5

Java Script :

function func_search()
                {

                        alert("Enter Search Criteria...");

                        document.location.href="search?srcstring=" + srchdata;  

                }

HTML :

<a onclick="func_search();"><img src="images/srch.png"  title="" /></a>

Answer 6

Check Out this!! [http://jsfiddle.net/Y4qsp/]

It may help you ! Give an id to your a tag , call onClick function on that id and call your function from the click function.

Answer 7

The simplest thing that you ca do is something like (in jQuery):

<div style="cursor:pointer; width: 100%; background-color: red">
   <a href="http://google.com">Your link</a>
</div>
$("div").click(function(){
   window.location=$(this).find("a").attr("href"); return false;
});

cursor:pointer to get the right cursor when you are over the div. In ajax environment you could get better result with:

$.ajax({
  url: "test.html",
}).done(function() {
  // handle successfull operations
});

read the documentation for details.