页面加载后应用Jquery

Question

I have following HTML code to add new div:

 <a class="add-link" id="buttonAdd" href="@Url.Action("Foo", "Foo1", new {actiontype = "Add" })">Add New Openings</a>

When i click on Add , new div is added. I want to show that div in editable mode by default, but as there is link in html for <a> I am not able to accomplish it. I want to show first div that is added as editable .

$(document).ready(function () {
    $('.container').on('click', '.add-link', function () {
            $("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
            $('#accordion').first().find('.edit-link').css('display', 'none');
            $('#accordion').first().find('.done-link').css('display', 'inline');
        });

Can someone guide me please.

Answer 1

You need to prevent the default click behaviour:

$(document).ready(function () {
    $('.container').on('click', '.add-link', function (e) {
            e.preventDefault();
            $("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
            $('#accordion').first().find('.edit-link').css('display', 'none');
            $('#accordion').first().find('.done-link').css('display', 'inline');
        });

Apparently this is only the first issue. They also want the code to run after the link page has been loaded!!! :)

How web pages work.

Because the web was designed to be stateless, to a web browser, each page load is separate to the last. Even if they are the same URL. The practical upshot of this is that your code gets reloaded and restarted on each page.

Based on your comments you want to add a div then apply jQuery to the accordion. You have two options.

a)

Detect the change of divs on page load and apply the change then.

b)

Run the link via an Ajax call and update just the required part of the page using informtion in the new page returned from the server.

Of these two options only the Ajax solution will allow you to retain code-control on the originating page. I would suggest the URL be changed to a method which returns a PartialPage containing just the new DIV.

In order to answer this definitively, we need more information about how you prefer to solve the problem.

If you go Ajax:

If you go with an Ajax update, I suggest you change the link to an action that just returns the new DIV in a PartialView. Then you can do something like this:

$('.container').on('click', '.add-link', function (e) {
    // Stop default processing of the link
    e.preventDefault();
    // Load the new page (specified by the clicked link's href)
    var $link = $(this);
    var url = $link.attr('href');
    alert(url); // for testing - remove this

    // Execute a HTML GET command on the URL
    $.get(url, function (html) {
        // Add the new DIV "somewhere" to be determined
        $('.container').append(html);

        // Then do your other processing
        $("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
        $('#accordion').first().find('.edit-link').css('display', 'none');
        $('#accordion').first().find('.done-link').css('display', 'inline');
    });
});