Question

我有以下HTML代码添加新的div：

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

当我点击添加时，会添加新的div。我想在默认情况下以可编辑模式显示div，但由于<a>的html中存在链接，我无法完成它。我想显示第一个添加为可编辑的div。

$(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');
        });

有人可以指导我。

Answer 1

您需要阻止默认点击行为：

$(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');
        });

显然这只是第一个问题。他们还希望代码在链接页面加载后运行！：）

网页如何运作。

由于网络设计为无状态，因此对于Web浏览器，每个页面加载都与最后一个分开。 即使它们是相同的URL。这样做的实际结果是您的代码会在每个页面上重新加载并重新启动。

根据您的评论，您想要添加div然后将jQuery应用于手风琴。你有两个选择。

A）

检测页面加载时div的变化，然后应用更改。

b）中

通过Ajax调用运行链接，并使用服务器返回的新页面中的informtion更新页面所需的部分。

在这两个选项中，只有Ajax解决方案允许您在原始页面上保留代码控制。我建议将URL更改为返回仅包含新DIV的PartialPage的方法。

为了最终回答这个问题，我们需要更多关于您希望如何解决问题的信息。

如果你去Ajax：

如果您使用Ajax更新，我建议您将链接更改为仅在PartialView中返回新DIV的操作。然后你可以做这样的事情：

$('.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');
    });
});

在页面加载后应用Jquery

1 个答案:

网页如何运作。

A）

b）中

如果你去Ajax：