添加JavaScript onClick到动态生成的asp按钮

时间:2016-03-30 08:58:24

标签: javascript asp.net vb.net

后台我的页面根据SQL数据库的行创建对象列表。对于每个对象,动态生成包含一些项的DIV,包括LinkBut​​ton和最初隐藏的另一个子DIV。我希望链接按钮切换子DIV的隐藏属性。 JavaScript不是动态生成的,而是包含在ASPX页面中。

问题我不知道如何使这个生成的LinkBut​​ton触发包含在ASPX页面中的JavaScript并传入正确的DIV ID。

我猜我需要为按钮添加一个属性,如下所示:

    myButton.Attributes.Add(reference to JS function + parameter of DIV's ID) 

也许喜欢:

    myButton.Attributes.Add("onclick", "Show_Hide_Display('"<%="' +idString+ '".ClientID%>"')");

在按钮被赋予指向函数&#34; Show_Hide_Display&#34;的JS onClick处理程序的属性的位置。以及作为所呈现的ID计算的DIV ID的参数。但是这种语法不正确。

我如何写这个,所以它调用&#39; Show_Hide_Display&#39;并传递当前子DIV的ID?除了引用行号的数字之外,所有DIV都具有相同的ID,例如&#39;&#34; myDiv _&#34; + counter.ToString&#39;

JavaScript我试图在按钮上添加一个调用:

   function Show_Hide_Display(divID) {

        var div = document.getElementById(divID);
        var style = document.defaultView.getComputedStyle(div);
        var display = style.getPropertyValue('display');

        if (display == '' || display == 'block') {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }

    }

3 个答案:

答案 0 :(得分:1)

如果你正在使用jQuery,你可以使用jQuery委托方法。

<?php
$servername = "localhost";
$username = "root";
$password = "usbw";
$dbname = "persons";

// CREATE A CONNECTION WITH THE DATABASE
// CONNECTIE MAKEN MET DATABASE
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// GET ID FROM person_id
// PAK ID VAN person_id 
$person_id = (isset($_GET['person_id']) ? $_GET['person_id'] : null);

// CREATE PREPARE STATMENT FOR DELETING RECORDS FROM person_id
// MAAK EEN STATEMENT OM WAARDES TE VERWIJDEREN VAN person_id
$stmt = $conn->prepare('DELETE FROM `person` WHERE person_id = ?'); 
$stmt->bind_param('s', $person_id);                                         

// EXECUTE STATEMENT AND IF RESULT IS FALSE SHOW ERROR
// VOER STATEMENT UIT EN ALS VALS IS GEEF ERROR AAN
$result = $stmt->execute();    
if ($result === FALSE) {
    die("Error: " . $stmt->error);
}

$address_id = (isset($_GET['address_id']) ? $_GET['address_id'] : null);

$stmt = $conn->prepare('DELETE FROM `address` WHERE address_id = ?'); 
$stmt->bind_param('s', $address_id);                                         

// EXECUTE STATEMENT AND IF RESULT IS FALSE SHOW ERROR
// VOER STATEMENT UIT EN ALS VALS IS GEEF ERROR AAN
$result = $stmt->execute();    
if ($result === FALSE) {
    die("Error: " . $stmt->error);
}

$cv_id = (isset($_GET['cv_id']) ? $_GET['cv_id'] : null);

$stmt = $conn->prepare('DELETE FROM `cv` WHERE cv_id = ?'); 
$stmt->bind_param('s', $cv_id);                                         

// EXECUTE STATEMENT AND IF RESULT IS FALSE SHOW ERROR
// VOER STATEMENT UIT EN ALS VALS IS GEEF ERROR AAN
$result = $stmt->execute();    
if ($result === FALSE) {
    die("Error: " . $stmt->error);
}
// AFTER CLICKING DELETE GO TO LINK
// NA HET DRUKKEN VAN DELETE GA NAAR LINK
header("Location: http://localhost:8080/Website/admin.php");

// CLOSE CONNECTION AND STATEMENT
// SLUIT CONNECTIE EN STATEMENT
$stmt->close();
$conn->close();
?>

您需要根据DOM结构实现getSubDivByParent。

如果您不使用jQuery,则需要自己附加活动。对于每个动态生成的元素。您需要在服务器代码中手动添加以下脚本来注册事件。

$(document).on("click", "div.parent", function(){
   var subDivId = getSubDivByParent(this);
   Show_Hide_Display(subDivId);
};

答案 1 :(得分:1)

使用以下语法...

myButton.Attributes.Add("onclick", "Show_Hide_Display(this.id);");

上面的语法允许调用id为其参数的函数。

建议:     尝试编写一个不依赖于生成的控件ID的公共函数。

如果这对您的要求没有用,请发布您的代码,这可能会让我有更好的想法。

答案 2 :(得分:0)

My suggestion is use jquery to achieve the functionality.

My solution works if you want to toggle the immediate div for the link.just call  onclientclick method to toggle the div.

in linkbutton onclientclick="Show_Hide_Display(this)"

function Show_Hide_Display(id) {
    $(id).next('div').toggle();
 }

I hope this helps you .. Thanks