Jquery ui选项卡对话框PreventDefault答案

【问题标题】：Jquery ui Tabs Dialog PreventDefaultJquery ui选项卡对话框PreventDefault
【发布时间】：2014-07-05 17:34:46
【问题描述】：

我是 jquery 的新手，我正在尝试将对话框绑定到 jquery ui 中的选项卡，该选项卡有一个锚点，将在对话框中用于从对话框中的表单创建数据。选项卡和对话框工作正常，但我似乎无法使 e.preventDefault 正常工作。它总是跳转并尝试在选项卡内容中加载锚内容。

对话框的目标是添加一个新选项卡，类似于您在此处看到的内容 http://freewebmentor.com/demo/addtabs.html

这就是我所拥有的

$(function() {
    $("a#add").on('click', function(e) {

        e.preventDefault();

        var $form = $('<form class="dialog-form">'+'<p><label>'+'Name'+'</label><span><input class="input-text" type="text" name="name" /></span></p>'+'</form>');

        $form.dialog({
            width:     235,
            modal:     true,
            draggable: true,
            resizable: false,
            title:     'Create'
        });
    });

    $("#tabs").tabs();
});

和

<ul>
    <?php foreach($data as $item): ?>
    <li><a href="#tabs-<?php echo $item->id;?>"><?php echo $item->name; ?></a></li>
    <?php endforeach; ?>
    <li><a id="add" href="<?php echo link('cp/create/item/'.$item->id); ?>" title="Add Item">+</a></li>
</ul>

<?php foreach($data as $item): ?>
<div id="tabs-<?php echo $item->id; ?>">
    <input type="hidden" name="item[<?php echo $item->id; ?>][name]" value="<?php echo $item->name; ?>" />
    <textarea name="item[<?php echo $item->id; ?>][content]"><?php echo htmlspecialchars($item->content); ?></textarea>
 </div>
 <?php endforeach; ?>

我搜索了很多，但没有一个解决方案适合我。

编辑：

设法做到这一点

$("#tabs").tabs({
    beforeLoad: function (e, ui) {
        e.preventDefault();
    }
});

谁有更好的主意？

【问题讨论】：

如果您可以完全控制标记（正如您的第二个代码 sn-p 似乎暗示的那样），为什么还要使用 <a> 标记呢？您已经在使用 jQ 创建自定义点击处理程序，因此将 ID 设置为 add 的元素类似于 <span>，您甚至不必担心会阻止默认行为。

标签： jquery jquery-ui tabs dialog anchor

【解决方案1】：

DEMO

我添加了如下链接：

<a href="sdfds" id="add_tab_link">Add Tab (this is a link)</a>

点击链接打开模态的js代码为：

$( "#add_tab_link" ).click(function(e) {
        e.preventDefault();
        //alert('clicked');
        dialog.dialog( "open" );
      });

【讨论】：

【解决方案2】：

我已经设法用这段代码找到了一个小解决方案来解决我的问题。如果其他人有更好的想法，我很想知道。

$("#tabs").tabs({
    beforeLoad: function (e, ui) {
        e.preventDefault();
    }
});

【讨论】：