CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvcasp.net-mvc-4
StepUp
StepUp

Reputation: 38114

How to call a JS method when user clicks at dynamically created link. JQuery, ASP.NET MVC

I dynamically create a link at view to call a method of controller:

   $(document).ready(function(){
     var data="SomeDataToController";
     var link=document.createElement('a');
     var linkText=document.createTextNode("Delete");
     link.appendChild(linkText);
     link.title="Title text";
     link.href=HelloWorld(ee); 
    document.getElementById("imageBox1").
    appendChild(link);


    }
   function HelloWorld(data){
    alert(data);}

How to call method HelloWorld(data) just if an user clicks on link "Delete"?

I've tried to invoke code at "onclick" event, but HelloWorld() function calls immediately when tag is built. However, I would like to call when an user clicks at the link.

Upvotes: 0

Views: 114

Answers (6)

Iridio
Iridio

Reputation: 9271

Use the .on command of jQuery, but use it as a delegate. That's to handle creation of objects also after your page is loaded.

For example you can attach the .on at the <body> level and say that, everytime an <a> with class "clickme" is clicked, it will execute your method.

Something like this:

$(body).on("click", ".clickMe", function (e) {
  e.preventDefault();
  HelloWorld('my value taken from data- attribute or whatever');
});

Upvotes: 1

neo x
neo x

Reputation: 51

If you want to execute the JavaScript function when user click on your elements,you can use something like this.

   $(document).ready(function () {
        var data = "SomeDataToController";
        var link = document.createElement('a');
        var linkText = document.createTextNode("Delete");
        link.appendChild(linkText);
        link.title = "Delete";
        link.onclick = eval(getDeleted);
        document.getElementById("imageBox1").appendChild(link);

    });

    function getDeleted() {

        var f = "delete";
        Delete(f);
    }

    function Delete(f) {
        alert(f);
    }

But I would like to use jQuery functionality something like this.

`

function myHandler(event) {
    alert(event.data.foo);
}
$('#imageBox1 a').on("click", {
    foo: "bar"
}, myHandler);

`

Upvotes: 1

Riicckie
Riicckie

Reputation: 21

$(document).on("click", "a", function(data){
    alert(data);
});

Upvotes: 0

Sami Kuhmonen
Sami Kuhmonen

Reputation: 31153

There are two main problems here: you shouldn't try to set an onclick handler by setting href to something and you're actually calling the HelloWorld() function when assigning, so basically you're assigning whatever that function returns into the href.

You should rather use addEventListener to attach a function that calls HelloWorld() on click:

link.addEventListener('click', function() { HelloWorld(data); })

If you need to support Internet Explorer before version 9, you also need to have conditional for that and use attachEvent() rather.

Upvotes: 1

kuldeep.kamboj
kuldeep.kamboj

Reputation: 2606

You are trying to attach a event. You need to use addEventListener or attachEvent instead of directly assign function to href.

if (window.addEventListener) {
  link.addEventListener('click', HelloWorld(ee), false);
} else if (window.attachEvent) {
  link.attachEvent('onclick', HelloWorld(ee));
}

Upvotes: 2

111
111

Reputation: 1779

I recommend that use jQuery to create dynamic HTML.

$("#imageBox1").append('<a href="' + javascript:alert(1); + '">' + text + '</a>');

Upvotes: 0

Related Questions