Calling event click with JavaScript

Question

It is possible to call a event click with JavaScript? how?

I'm trying to call this event when a button get clicked.

I'm creating Buttons dynamically so the id's change constantly

Here is how i make the buttons dynamically and assign the event click

protected void Page_Init(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "showAndHide();", true);

            Button Btn_clic = (Button)sender;
            var name = Btn_clic.Text;

            List.ListUsers listArea = new List.ListUsers();
            List<Data.Area> Area = listArea.AreaList();

            List<Data.Area> ListOfEquiposOk = Area.Where(x => x.AREA == name && x.STANDBY == 0).ToList();

            List<Button> Botones = new List<Button>();

            var TeamFCH = ListOfEquiposOk.Select(x => x.TEAM).Distinct().ToList();

            foreach (var team in TeamFCH)
            {
                Button newButton = new Button();
                newButton.CommandName = "Btn" + Convert.ToString(team);
                newButton.ID = "Btn_" + Convert.ToString(team);
                newButton.Text = team;
                newButton.CommandArgument = name;

                newButton.Click += new System.EventHandler(newButton_Click);


                Botones.Add(newButton);

                GoodPanel.Controls.Add(newButton);
                newButton.CssClass = "btn-primary outline separate";
            }
        }

protected void newButton_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "ModalGood();", true);

            Button Btnclick = (Button)sender;
            var team = Btnclick.Text;
            string name = Btnclick.CommandArgument;

            List.ListUsers listArea = new List.ListUsers();
            List<Data.Area> Area = listArea.AreaList();

            List<Data.Area> ListOfToolsOk = Area.Where(x => x.AREA == name && x.TEAM == team && x.STANDBY == 0).ToList();

            var ToolArea = ListOfToolsOk.Select(x => x.TEAM);
            Grv_Eng.DataSource = ListOfToolsOk;
            Grv_Eng.DataBind();
        }

Then why not add it to the button? ``. If you have done that @Aenadon's answer should work. — VDWWD, Jul 04 '17 at 20:07

VDWWD · Accepted Answer · 2017-07-04T20:15:36.007

1

If you want to assign a OnClick event, do it like this.

Button Btnclick = new Button();
Btnclick.Click += newButton_Click;
Btnclick.Text = "MyButton";
Btnclick.ID = "MyButtonID";

PlaceHolder1.Controls.Add(Btnclick);

And if you want to reference the dynamic ID, use FindControl and ClientID on the aspx page.

document.getElementById("<%= PlaceHolder1.FindControl("MyButtonID").ClientID %>").click

edited Jul 04 '17 at 20:15

answered Jul 04 '17 at 20:11

VDWWD

35,079
22
62
79

i have like this but my event doesn't fire, i don't know why you can look at here https://stackoverflow.com/questions/44905518/event-click-doesnt-get-fired?noredirect=1#comment76790267_44905518 – cesg.dav Jul 04 '17 at 20:13
Probably because you need to assign the click on EVERY page load, and that includes a PostBack. So if you assign the `Click` in another Button event, then you must make sure you execute it again at next page load. – VDWWD Jul 04 '17 at 20:16
so in the page_load i need to put the event like `Event(sender, e)`? – cesg.dav Jul 04 '17 at 20:19
I tested your snippet. It works. Just put it in `Page_load`. And start by getting one button to work and work from there. And don't store buttons in a List, that makes no sense. Also if you want to use `CommandArgument`, you need to assign a `Command`, not a `Click` – VDWWD Jul 04 '17 at 20:21
what did you recommend instead the list of buttons? i use because in my XML there are many "TEAMS" so these is why the list – cesg.dav Jul 04 '17 at 20:34
but the list that i have first takes data from the data base (I'm newest in asp.net, i know that these doesn't justify at all) – cesg.dav Jul 04 '17 at 20:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148357/discussion-between-cesg-dav-and-vdwwd). – cesg.dav Jul 04 '17 at 20:59

score 0 · Answer 2 · answered Jul 04 '17 at 20:05

0

Assign an onClick listener to your button.

document.getElementById("your-id").click = function () {
    newButton_Click();
}

answered Jul 04 '17 at 20:05

techfly

1,826
3
25
31

I'm creating the buttons dynamically, so the id change constantly – cesg.dav Jul 04 '17 at 20:08
Add when creating the button. – Daniel Möller Jul 04 '17 at 20:10
or use document.getElementsByClassName() / .getElementsByTagName() – Paul Jul 04 '17 at 20:10
@Daniel i add when i create the buttons – cesg.dav Jul 04 '17 at 20:14

score 0 · Answer 3 · answered Jul 04 '17 at 20:12

0

Here you go try this for dynamically created buttons

$(document).on('click', '#id', function(){});

answered Jul 04 '17 at 20:12

Aniket

93
10

if your id's change everytime assign a class to them and just replace #id with .className – Aniket Jul 04 '17 at 20:13

score 0 · Answer 4 · answered Jul 04 '17 at 20:48

You can use a data- attribute to id the buttons from javascript and then you just attach to the javascript event:

So, from the server side you can do this:

 newButton.Attributes["data-dynamic-button"] = team;

And you can implement this on the client side:

$("[data-dynamic-button]").click(function (event) {
    event.preventDefault()
    alert($(event.currentTarget).data("dynamic-button"));
});

Calling event click with JavaScript

4 Answers4