2014-07-05 3 views
0

jquery를 처음 사용하고 jquery UI의 탭에 바인딩하려고하는데이 탭에는 대화 상자의 양식에서 데이터를 만드는 데 사용할 앵커가 있습니다. . 탭과 대화 상자는 정상적으로 작동하지만 e.preventDefault를 제대로 작동시키지 못합니다. 항상 점프하고 탭 컨텐트에서 앵커 컨텐트를로드하려고 시도합니다.Jquery UI 대화 상자 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(); 
    } 
}); 

어느 하나에 그것을 할 관리?

답변

0

DEMO

내가 좋아하는 링크를 추가 한 : 링크의 클릭에 모달을 여는

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

와의 js 코드입니다 : I가 관리 한

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

이 약간의 코드로 내 문제의 작은 솔루션을 찾으십시오. 다른 사람이 더 좋은 아이디어 인 경우 그 사실을 알고 싶습니다. 마크 업의 모든 권한이있는 경우 (두 번째 코드는 제안 보인다)

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