CODEWITHSUNDEEP
javascriptjqueryhtml
anoop.george
anoop.george

Reputation: 31

On adding the click event tracker using jquery on the document, the click event on a link is not working

I have a file listing and there is option to delete the file. So on clicking the delete it asks for a confirmation. On clicking the confirm the file is deleted. Please check this jsfiddle for that

https://jsfiddle.net/d6ds7qL2/1/

When I add a html click handler inorder to change the confirm text to the original delete text, 

$('html').click(function(event){
     if($('.confirmDelete').is(':visible')){
         $('.confirmDelete').hide();
         $('.deleteLink').show();
         return false;
     }
});
$('.confirmDelete').hide();
$('.deleteLink').click(function (event) {
    $(this).hide();
    $('.confirmDelete').filter(':visible').each(function () {
        $(this).hide();
        $(this).prev('.deleteLink').show();
    });
    $(this).next('.confirmDelete').show();
    event.stopPropagation();
    return false;
});

https://jsfiddle.net/d6ds7qL2/2/

But the issue is now on clicking the 'Confirm' text it is not going to href but hiding the confirm text and showing the delete text.

Upvotes: 0

Views: 48

Answers (2)

anoop.george
anoop.george

Reputation: 31

I was able to update the script and it is now working as intended

$('html').click(function(e){
    var target = $(e.target);
    if(!target.hasClass('confirmDelete')){
        if($('.confirmDelete').is(':visible')){
            $('.confirmDelete').hide();
            $('.deleteLink').show();
            return false;
        }
    }
});
$('.confirmDelete').hide();
$('.deleteLink').click(function (event) {
    $(this).hide();
    $('.confirmDelete').filter(':visible').each(function () {
        $(this).hide();
        $(this).prev('.deleteLink').show();
    });
    $(this).next('.confirmDelete').show();
    event.stopPropagation();
    return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%">
    <tr>
        <td width="60%">file name 1</td>
        <td width="40%">
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="delete.html?file=1">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 2</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="delete.html?file=2">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 3</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=3">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 4</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=4">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 5</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=5">Confirm?</a>
        </td>
    </tr>
</table>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Try instead of html, document.

$(document).not(".confirmDelete").click(function(event){
    if($('.confirmDelete').is(':visible')){
        $('.confirmDelete').hide();
        $('.deleteLink').show();
        return false;
    }
});
$('.confirmDelete').hide();
$('.deleteLink').click(function (event) {
    $(this).hide();
    $('.confirmDelete').filter(':visible').each(function () {
        $(this).hide();
        $(this).prev('.deleteLink').show();
    });
    $(this).next('.confirmDelete').show();
    event.stopPropagation();
    return false;
});

Fiddle: https://jsfiddle.net/945j4g0x/

Upvotes: 1

Related Questions