网址的模态对话框不起作用?

时间:2015-08-06 20:08:44

标签: javascript jquery jquery-ui

对不起,这让我疯了,但当我将按钮切换到链接时,我的模态对话框没有显示出来。基本上这个功能(对不起,我不得不把公司的敏感数据拿出去,所以有些代码丢失但仍然有效)我只是希望编辑放入一个带有id或类的链接,这个链接不起作用但是该地址打开一个对话框,其中包含地址URL。

我使用了一个按钮,但这不适用于下面的链接和代码。他们还手动输入链接到p-tag,并想知道是否可以通过href捕获。

$(function() {
    var dialog, form,


      tips = $( ".validateTips" );


    function addUser() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );

      valid = valid && checkLength( name, "username", 3, 16 );
      valid = valid && checkLength( email, "email", 6, 80 );
      valid = valid && checkLength( password, "password", 5, 16 );

      valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
      valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
      valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

      if ( valid ) {
        $( "#users tbody" ).append( "<tr>" +
          "<td>" + name.val() + "</td>" +
          "<td>" + email.val() + "</td>" +
          "<td>" + password.val() + "</td>" +
        "</tr>" );
        dialog.dialog( "close" );
      }
      return valid;
    }

    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,

    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });

    $( "#create-link" ).a().on( "click", function(e) {
      e.preventDefault();
      dialog.dialog( "open" );
    });
  });



<div><a href="https://xyz" id="create-link">Perma-link</a></div>
<div id="dialog-form" title="Link Address">
<p class="validateTips">https://xyz</p>
</div>

注意 - 我完全理解在模式框中捕获链接很奇怪,但我们必须这样做,因为供应商不会在网址中显示完整的活动链接。因此,当我们的用户尝试共享页面时,他们会在浏览器中复制网址,这会使其他用户无法访问。此处的链接将它们带到永久页面。我知道这很愚蠢但需要。

2 个答案:

答案 0 :(得分:1)

使用jQuery选择器查找元素时,它会返回一个jQuery对象,您可以在其上调用jQuery定义的方法。

在您的代码中,您有:

$( "#create-link" ).a().on( "click", function(e) {
  e.preventDefault();
  dialog.dialog( "open" );
});

$("#create-link")返回的对象是html中a标记的jQuery对象。您只能在该对象上调用jQuery方法。就我在jQuery或jQuery UI中所知,方法a()没有定义。删除它。

对于链接本身,添加链接然后阻止单击链接的操作没有意义。根据这条评论,我猜你还没有理解这些要求:

  UI人员希望我将其作为链接交给他们。所以最后一部分   这是将按钮移动到链接,然后进行href   自动填充validateTips部分

这对我来说就像他们希望你为用户提供一个链接。

答案 1 :(得分:1)

单击链接时,我认为您的点击事件不会触发。为什么不说

$( "#create-link" ).on( "click", function(e) {
  e.preventDefault();
  dialog.dialog( "open" );
});

只需删除a()即可。应该解决问题。

请参阅此处http://jsfiddle.net/eos4c25w/1/