CODEWITHSUNDEEP
javascriptjqueryhtml
Sharif
Sharif

Reputation: 728

anchor and submit button press event is not working

you can view the following code on jsfiddle too my full code is below

<html> 
<head> 
<title>Test Page</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>

.darkContent{
    position: fixed;
    background-color: white;
    border: 5px solid black;
    padding: 8px;
    overflow: hidden;
    color: #333;
    font-family: arial;
}
.darkCover{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 900;
    background-color: black;
    opacity: 0;
    width: 100%;
    height: 100%;
}
</style>

</head> 
<body> 
    <a href="javascript:;" data-target="#useThisDiv1" class="btn blue btn-xs darkBox">Show Box1</a>
    <form action="save.php" method="post">
    <div id="useThisDiv1" width="500" height="500">
        <h3 class="breadcrumb">Div TWO</h3>
        <div class="row" id="popup3">
            <div class="col-md-12">
                <div class="portlet">
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <textarea rows="2" cols="50" name="notification_text"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 ">
                                <div class="portlet-body form">
                                    <div class="form-body pull-right">
                                        <a href="javascript:;" class="btn yellow btn-xs add_case_note_cls" id="btn_close_div3"> Cancel </a> &nbsp;
                                        <a href="javascrip:;" id="saveNotification" class="btn yellow btn-xs"> save </a>
                                        <input type="submit" value="save" name="savethis">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>

<script>
$(function(){
    function darkBox(div){
        var w = (div.attr('width')) ? div.attr('width') : div.width();
        var h = (div.attr('height')) ? div.attr('height') : div.height();

        var box = $('<div></div>').addClass('darkCover');
        $('body').prepend(box);
        box.fadeTo('fast', 0.8);
        $(this).keydown(function(e){
            if(e.keyCode == 27){
                box.hide();
                contentBox.hide();
            }
        });

        var contentBox = $('<div></div>').html(div.html());
        contentBox.addClass('darkContent');

        var x = $(window).width()/2;
        var y = $(window).height()/2;
        var endTop = y - h/2;
        var endLeft = x - w/2;

        contentBox.css("left", endLeft+"px");
        contentBox.css("top", endTop+"px");
        contentBox.css("z-index", "910");
        contentBox.css("width", w+"px");
        contentBox.css("height", h+"px");

        $('body').prepend(contentBox);
        contentBox.show();

    }

    $('.darkBox').each(function(){
        var div = $($(this).attr('data-target'));
        div.hide();
        $(this).click(function(){
            darkBox(div);
        });
    });

    $('.add_case_note_cls').click(function(){
        alert('foo');
        console.log('foo');
    });

});
</script> 

</body> 
</html>

If i click on any of them three buttons I don't get any response what so ever, I've two anchor tags and one submit button, they're not working. Their click events are not registering I tried both by calling them with their class names like $('.classname).click(function(){alert('foo);}); and by using calling them id's like $('#cancelbtn).click(function(){alert('foo);});.

once again jsfiddle link

I don't know what i'm doing wrong here, any Idea?

Upvotes: 0

Views: 85

Answers (1)

Patrick Q
Patrick Q

Reputation: 6393

The main problem here is that you're essentially cloning your HTML when you show it. I'm not sure if that's what you're intending to do or not, but that's what you're doing when you do var contentBox = $('<div></div>').html(div.html());. So when you initially bind your click handler to the elements with the add_case_note_cls class, that only applies to the elements that currently exist in the DOM. However, the elements that you end up seeing, are created during the execution of your darkBox() function, and therefore do not have a click handler attached.

There are a few ways that you could go about rectifying this.

  1. Move the binding of the click handler to be within the darkBox() function. Maybe right at the end of it.

  2. Switch to using .on() instead of .click() for attaching click handlers. This will allow you to use delegated events, which will allow the click handler to fire on elements that are added to the DOM later. So instead of $('.add_case_note_cls').click(function(){ you'd have something like $('body').on('click', '.add_case_note_cls', function(){.

  3. Use the original HTML instead of cloning it. This may or may not be an option depending on what your ultimate goal is here. If you're trying to use the same base HTML, but copy it to multiple places, then this won't work. But if you're not, then you should be able to do it.

Also, it's not the cause of your problem, but you have a typo here <a href="javascrip:;" id="saveNotification". You're missing a "t".

And if you want your click handler to fire on both of the links and the button, you need to make sure that you have the appropriate class on all of them.

Upvotes: 1

Related Questions