JQuery Dynamic Button

Question

I have a input box. I enter the search term and the values get returned. What I am trying to do is click the dynamic button with the value attached to it. However when I click on the button it reloads the page instead of showing an alert box. This only happens with the dynamic button not the searchButton

$(document).ready(function () {
        $('.cta-button').click(function () {
            event.preventDefault();
            alert("You clicked the button");
        });

        $('#searchButton').click(function () {
            event.preventDefault();
            var varSearch = $('#searchDB').val();
            if (!varSearch) {
                $('#result').html("Please enter a search term");
                return;
            }
            $.ajax({
                contentType: "application/json; charset=utf-8",
                data: 'ID=' + varSearch,
                url: "getTest.ashx",
                dataType: "json",
                success: function (data) {
                    var result = '';
                    $.each(data, function (index, value) {
                        result += '' +
                            '<div class="main-area bg-white">' +
                            '<div class="row">' +
                                '<div class="medium-6 columns">' +
                                    '<button type="submit" id="OfferID_' + index + '" class="cta-button cta-button-icon">Add to Cart</button>' +
                                    '<br />' +
                                '</div>' +
                            '</div>' +
                            '</div>'
                    });
                    if (!result) {
                        result = 'No data were found for ' + varSearch;
                    };

                    $('#result').html(result);
                }
            });
        });
    });


<section>
    <div class="row">
        <div class="medium-4 columns medium-centered">
            <div class="search-rewards">
                <input type="search" id="searchDB" />
                <button type="submit" id="button" class="button"></button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="medium-6 columns medium-centered">
            <div id="result">

            </div>
        </div>
    </div>
</section>

Change from type="submit" to type="button"

Dave
– Dave

2017-01-03 04:10:57 +00:00
Commented Jan 3, 2017 at 4:10 — Dave
– Dave, Commented Jan 3, 2017 at 4:10
@Dave I tried that too. It does not work

Dan Nick
– Dan Nick

2017-01-03 04:13:32 +00:00
Commented Jan 3, 2017 at 4:13 — Dan Nick
– Dan Nick, Commented Jan 3, 2017 at 4:13

Michael Sacket · Accepted Answer · 2017-01-03 04:18:04Z

5

You're missing the event argument to your click functions. Without it, event.preventDefault() does nothing.

$('.cta-button').click(function(event) {
    event.preventDefault();
    alert("You clicked the button");
});

Update

To bind to dynamic buttons, you'd need to use a delegate as @MACMAN suggested:

$(document).on('click', '.cta-button', null, function(event){
    event.preventDefault();
    alert("You clicked the button"); 
});

edited Jan 3, 2017 at 4:18

answered Jan 3, 2017 at 4:08

Michael Sacket

9078 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dan Nick Over a year ago

It does not make a difference, the page still reloads and no alert box is shown

Michael Sacket Over a year ago

Can you edit your question with the HTML that you're binding to?

Michael Sacket Over a year ago

If you're trying to bind to the dynamic button, then as @MACMAN suggested, you'll also need to use a delegate.

Dave Over a year ago

This solution works, and I upvoted. However, rather than capturing the submit event and cancelling it, it's better to just use a more appropriate button type that doesn't require the event to be cancelled. Changing the type="submit" to type="button" will eliminate the need to intercept the submit event.

MACMAN · Accepted Answer · 2017-01-03 04:07:34Z

1

Use delegate to assign the click property to the dynamic button.

answered Jan 3, 2017 at 4:07

MACMAN

1,9712 gold badges22 silver badges37 bronze badges

Comments

Kapila Perera · Accepted Answer · 2017-01-03 04:33:40Z

0

Sometimes JQuery events not working for dynamically generated elements. You can use JQuery.on() for dynamically generated elements.

http://api.jquery.com/on/

try using this

$('.cta-button').on("click", (function() {
      event.preventDefault();
      alert("You clicked the button");
    });

answered Jan 3, 2017 at 4:33

Kapila Perera

8681 gold badge14 silver badges25 bronze badges

Collectives™ on Stack Overflow

JQuery Dynamic Button

3 Answers 3

Update

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related