Question

我是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();
    }
});

任何一个有更好主意的人？

Answer 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" );
      });

Answer 2

我已经设法通过这段代码为我的问题找到一个小解决方案。如果其他人有更好的主意，我很乐意了解它。

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

Jquery ui Tabs Dialog PreventDefault

2 个答案: