Show modal when clicking on button created dynamically

Navigation
0

I'm trying to show a modal, when clicking on a dynamically created button.

If I have it this way it runs but it immediately disappears and I can not do anything since the page goes gray. 

<script>
     function ModalGood() {
         $("#engModal").modal();
     };
</script>

but if I have it this way it simply sends a JavaScript error 

<script>
    $(document).ready(function () {
        $("").click(function () {
            $("#myModal").modal();
        });
    });
</script>

and this is my code of how I create the button on how I try to execute it when I click on the button created 

protected void Unnamed1_Click(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> ListOfEquiposFCHOk = Area.Where(x => x.AREA == name && x.STANDBY == 0).ToList();

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

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

            foreach (var team in TeamFCH)
            {
                Button newButton = new Button();
                newButton.ID = "Btn_" + Convert.ToString(team);
                newButton.Text = team;
                newButton.Click += new EventHandler(Info_Click);
                newButton.OnClientClick = "ModalGood();";
                Botones.Add(newButton);

                GoodPanel.Controls.Add(newButton);

                newButton.CssClass = "btn-primary outline separate";
            }

        }

In the second example I decided to leave it blank because I do not know how to give the id that is generated dynamically

    
asked by Cesar Gutierrez Davalos 29.06.2017 в 21:09
source

3 answers

0

The solution was really easy, I just need a return false in the script 

<script>
    function ModalGood() {
        $("#engModal").modal();
        return false;
    };
</script>
    
answered by 30.06.2017 / 18:44
source
1

Events in elements that are dynamically created are handled or captured differently in java script with jquery 

$("ul#pestanas_facturacion  ").on("click", "span",function (e) {});

In the previous example I am capturing the click event to the span element that was added dynamically to the Ul list in the case of the button would be 

     $("div#contenedor  ").on("click", "button",function (e) {
 $("#myModal").modal();
});

BEST EXPLAINED 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>



</head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" ></script>
<body>



</body>
<script type="text/javascript" >
$(document).on("ready", function(e){
    $("panel#GoodPanel").on("click", "button", function (e) { $("#engModal").modal(); }); 
});
</script>
</html>
    
answered by 29.06.2017 в 22:15
0

If this is the name of your Unnamed1 button, to call it from jQuery: 

$("#<%= Unnamed1.ClientID %>").click(function () {
    $("#myModal").modal();
});
    
answered by 29.06.2017 в 21:25
Can a dropdownlist be filtered according to the letters that you enter? How to use the text stored in one variable as the identifier of another variable [closed]