通过动态生成的href标记调用javascript函数（js函数具有一个参数）

Question

I need to call getStandards() function from the dynamically generated href tag.All the code is in .js file. 我需要从动态生成的href标记中调用getStandards（）函数。所有代码都位于.js文件中。 I went through many stackoverflow questions but I couldn't find the solution. 我经历了很多stackoverflow问题，但找不到解决方案。 The function has one parameter(classId) as shown below: 该函数具有一个参数（classId），如下所示：

 var ul = $('<ul></ul>'); var li = $('<li></li>'); for (var i = 0; i < classes.length; i++) { var classId = classes[i].classId; var html = ""; html = "<li><a href='#' id='" + classId + "' onClick='getStandards(" + classId + ")' >" + classes[i].className + "</a></li><br/>"; li.append(html); } ul.append(li); function getStandards(classId) { }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Can someone help me !! 有人能帮我吗！！ thank you. 谢谢。

Answer 1

Rather than making multiple inline bindings, I would suggest using a data attribute and a delegate event binding for this logic. 我建议不要为该逻辑使用数据属性和委托事件绑定，而不是进行多个内联绑定。

var ul = $('<ul></ul>');

ul.append(
  classes.map( aClass => {
    return `
      <li>
        <a href="#" class="class-entry"
           data-class-id="${aClass.classId}">
          ${aClass.className}
        </a>
      </li>
    `;
  } )
);

ul.on( 'click', '.class-entry', event => {
  let $link = $( event.target );

  getStandards( $link.data( 'classId' ) );
} );

function getStandards(classId) {

}

You can use a template literal to make your html construction more readable 您可以使用template literal来使您的html结构更具可读性
Mapping all the classes to html and appending them all and once, reduces the number of appends to the ul you are doing 将所有类映射到html并将它们全部追加一次，从而减少了正在执行的ul追加的次数
Attaching a delegate event listener to the ul lets you handle the click for all the children of it, and you can grab the class id from the data attribute 将委托事件侦听器附加到ul可以让您处理对其所有子级的单击，并且可以从data属性中获取类ID。

Answer 2

I would hazard a guess that you aren't appending your ul to the body and that the classId is a string. 我可能会猜测您没有将ul附加到正文上，并且classId是字符串。 With a few modifications this code can work: 经过一些修改，此代码即可工作：

<head>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"> . 
</script>
</head>
<body>
    <script>
        // This code is copyright by nobody and may be used freely without attribution
        var ul = $('<ul></ul>');
        var li = $('<li></li>');

        const classes = [
            { classId: 'id1', className: 'name1'}
        ];

        for (var i = 0; i < classes.length; i++) {
            var classId = classes[i].classId;
            var html = "";
            html = "<li><a href='#' id='" + classId + "' onClick='getStandards(\"" + 
    classId + "\")' >" + classes[i].className + "</a></li><br/>";
            li.append(html);
        }
        ul.append(li);

        $('body').append(ul);

        function getStandards(classId) {
            alert('get standards! ' + classId);
        }
    </script>
</body>

Note the appending to the body as well as the extra quotes by the onclick. 请注意正文的附加内容以及onclick的多余引号。 If you don't have those quotes, it will look like this: onclick="getStandards(id1)" which is invalid since id1 is a string 如果您没有这些引号，它将看起来像这样： onclick="getStandards(id1)"无效，因为id1是字符串

通过动态生成的href标记调用javascript函数（js函数具有一个参数）

问题描述

2 个解决方案

解决方案1
1 2019-08-15 22:32:16

解决方案2
0 2019-08-15 21:22:54

通过动态生成的href标记调用javascript函数（js函数具有一个参数）

问题描述

2 个解决方案

解决方案1 1 2019-08-15 22:32:16

解决方案2 0 2019-08-15 21:22:54

解决方案1
1 2019-08-15 22:32:16

解决方案2
0 2019-08-15 21:22:54