Question

My jQuery code does not work as expected.

Here is the HTML:

<a href="">Some link</a>
<br/>
<a class="delete_file_initial" href="">Delete file</a>
<span class="delete_file_question hide">are you sure to delete?</span>
<a class="delete_file_question confirm hide" href="http://example.com/delete">yes</a>
<a class="delete_file_question cancel hide" href="">no</a>
<br/>
<a class="move_file_initial" href="">Move file</a>
<span class="move_file_question hide">are you sure to move?</span>
<a class="move_file_question confirm hide" href="http://example.com/move">yes</a>
<a class="move_file_question cancel hide" href="">no</a>

And the Javascript:

$(function() {
    // delete file
    $("a.delete_file_initial").click(function(event) {
        event.preventDefault()
        $(this).hide()
        $(".delete_file_question").show()
    });
    $("a.delete_file_question").click(function(event) {
        if ($(this).hasClass("cancel")) {
            event.preventDefault()
            $(".delete_file_question").hide()
            $(".delete_file_initial").show()
        }
    });

    // move file
    $("a.move_file_initial").click(function(event) {
        event.preventDefault()
        $(this).hide()
        $(".move_file_question").show()
    });
    $("a.move_file_question").click(function(event) { 
        if ($(this).hasClass("cancel")) {
            event.preventDefault()
            $(".move_file_question").hide()
            $(".move_file_initial").show()
        }
    });

});

There are two similar code blocks: delete and move. They are supposed to do the same thing except that the actual URLs to load are different.
Expected behaviour is as follows. A user clicks on the link “delete”/”move”, then a confirmation link is shown, and he confirms or cancels the action.

The problem is that when I click on the link “delete_file_initial”, it hides, but the links “delete_file_question” do not show up, leaving a blank line. The “move” block works as expected. And if I comment the “move” block, the “delete” block starts working as expected. What’s even more strange is that this bug appears in Google Chrome 22.0.1229.79, but in Firefox 15.0.1 everything works fine.

How to fix this bug?

Answer 1

The problem was not in the javascript, but, strangely, in the HTML code. I removed the first <br/> tag before <a class="delete_file_initial" href="">Delete file</a>, and it started working properly. The whole code block was a series of <a> tags separated by <br/> tags. I replaced them with a simple <ul><li> structure, and the problem has been solved, keeping the original layout and functionality.

If anyone understands the reason for this problem, please let me know.