1
paramToExternalFile = 'all';

var div = document.createElement('div');
div.style.background = '#D8D8D8';
div.innerHTML = '<a href=' + xml_list_externalFile_SNS1 + paramToExternalFile + '/' + letters + '>View All</a>';
div.id = 'view_all';
div.className='optionDiv_sns';
ajax_optionDiv_SNS.appendChild(div);

This is the javascript for creating a div in dropdown, but I want this div to be clickable.

As you can see I have given the link but it will work only when I click by using mouse on that link but it won't work when I press 'enter'

5 Answers 5

4

You can add a click event directly to your div like this

div.addEventListener("click", function() {
   alert("You clicked this div");
});

If you want to support older browsers, you'll have to do a bit more work:

if (div.addEventListener)
     div.addEventListener("click", function() {
         alert("You clicked this div");
     });
else if (div.attachEvent) 
     div.attachEvent("onclick", function() {
         alert("You clicked this div");
     });
3
  • as u can see in my question i am using javascript for my code and and i modified div.addEventListener("click", function() { alert("You clicked this div"); }); it works for me , thanks for this. I also want same thing for enter event as i press enter it shoud do the same as click event , so let me know what i should modify in my code
    – vishal_g
    Commented Dec 16, 2011 at 6:35
  • @vishal - I don't think divs have an enter event, but if you're talking about textboxes, they have a focus event you could use. Commented Dec 16, 2011 at 6:41
  • I will tell you my problem , m using drop drown list in search and suggest and i am getting list according to my logic and max 10 values will get publist in drop down. At the end one more div i have added for viewing all the list and this div is clickable now as i have modified that div according to ur answer. but when i press enter that div value that is 'View All' get published in text box and replace the entered value and go to ** [link](localhost/View All)**. So instead of this 'View All' I want that text value which i enter in text box
    – vishal_g
    Commented Dec 16, 2011 at 6:55
1
<script type="text/javascript">
function myFn() {
   alert("My div is clicked!!");
   // something else...
}
</script>
<div onclick="myFn();">My DIV body</div>

Is this what you want? or you can try this:

<div id="myDiv"> My Div body </div>
<script type="text/javascript">
// Works on not-ie
document.getElementById("myDiv").addEventListener("click",function() {
    alert("I'm clicked!!");
}, false);
// Works on all
document.getElementById("myDiv").onclick = function() {
    alert("I'm clicked!!");
}
// Works on ie
document.getElementbyId("myDiv").attachEvent("onclick",function() {
    alert("I'm clicked!!");
});
</script>
0
$('#view_all').click(function() {
  alert('Handler for .click() called.');
});
5
  • 1
    Please note, this is jQuery not actual javascript like asked. Yes jQuery could be usefull for the OP, but for the sake of this question and answer to help a more broad public than only our OP here i think a note needs to be added
    – Sander
    Commented Dec 16, 2011 at 5:20
  • Says AJAX right in the title, so this applies. Please read the entire post. Please read: docs.jquery.com/Ajax_Events so you better understand AJAX event handling and how jquery fits in to these scenarios. Flame elsewhere.
    – Travis J
    Commented Dec 16, 2011 at 5:26
  • For all we know, the OP is a beginning javascript enthousiast without any knowledge of jQuery, all i said was: add a frickin note saying your code uses an external lib. Jeez long toes
    – Sander
    Commented Dec 16, 2011 at 5:32
  • @Sander I'm with you, even though I had to raise an eyebrow at "actual javascript". When you use a library you're still using actual JavaScript. But I knew what you meant. ;-) Commented Dec 16, 2011 at 5:51
  • Well, in my belief jquery is like a dialect, thus not the actual motherlanguage, anyway not the place for this discussion just happy someone caught what i meant
    – Sander
    Commented Dec 16, 2011 at 6:03
0

Use the OnClick event to attach your Javascript function to it, like:

<div onclick="alert('clicked');">
 This is a div
</div>

To call the click function on pressing the Enter key you can try this untested code, it should work:

<div onkeydown="if (event.keyCode == 13) DoSomething();"/>

On the other hand you can use JQuery for that which can make it easier, see this Untested code:

$("#idivId").keyup(function(event){
  if(event.keyCode == 13){
    $("#DivId").click();
  }
});
1
  • thanks to all this works for me, if i click by using mouse it is working perfect. Let me know if i press enter over div , i want same effect that i should hit that url which i defined in div
    – vishal_g
    Commented Dec 16, 2011 at 5:50
0
div.onclick=function(){
  // whatever you want to happen here
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.