Question

我正在尝试构建一个使用动态ID的jQuery点击功能，并且可以应用于在click功能中生成的html按钮，因此我不必不必要地复制代码。不幸的是，代码似乎只适用于第一次迭代。这是我的代码片段：

var rowCount = parseFloat($('#sonstige_zahlungsströme tbody').length);
console.log(rowCount);

$('#zahlungsstrom_hinzufügen_' + rowCount).click(function() {
  var rowCountPlus = rowCount + 1
  var styleFormatCashFlowStartDate = '<input type="text" style="width: 200px; padding: 5px;" id=\"startdatum_' + rowCountPlus + '\" placeholder="Startdatum" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')">';
  var styleFormatCashFlowTargetDate = '<input type="text" style="width: 200px; padding: 5px;" id=\"enddatum_' + rowCountPlus + '\" placeholder="Enddatum" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')">';
  var styleFormatCashFlowPayment = '<input type="text" style="width: 200px; padding: 5px;" id=\"zahlung' + rowCountPlus + '\" placeholder="Zahlung [€/Monat]">';

  jQuery('#sonstiger_zahlungsstrom_' + rowCount).after('<tbody id=\"sonstiger_zahlungsstrom_' + rowCountPlus + '\"><td>' + styleFormatCashFlowStartDate + '</td><td>' + styleFormatCashFlowTargetDate + '</td><td>' + styleFormatCashFlowPayment + '</td><td><button id=\"zahlungsstrom_hinzufügen_' + rowCountPlus + '\">&#10010;</button></td><td><button id=\"zahlungsstrom_entfernen_' + rowCountPlus + '\">&times;</button></td></tbody>');

  //$('#zahlungsstrom_hinzufügen_'+rowCount).hide()

  rowCount = parseFloat($('#sonstige_zahlungsströme tbody').length);
  console.log(rowCount);

        <h4><b>Sonstige Zahlungsströme</b></h4>
        <table id="sonstige_zahlungsströme">
            <tbody id="sonstiger_zahlungsstrom_1">
                <td><input type="text" style= "width: 200px; padding: 5px;" id="startdatum_1" placeholder="Startdatum" onfocus="(this.type='date')" onblur="(this.type='text')"/></td>
                <td><input type="text" style= "width: 200px; padding: 5px;" id="enddatum_1" placeholder="Enddatum" onfocus="(this.type='date')" onblur="(this.type='text')"/></td>
                <td><input type="text" style= "width: 200px; padding: 5px;" id="zahlung_1" placeholder="Zahlung [€/Monat]"/></td>
                <td><button id="zahlungsstrom_hinzufügen_1">&#10010;</button></td>
            </tbody>
        </table>

我在函数之前声明了一个全局变量（var rowCount），该函数在执行时应该在函数结束时更新。在第一次迭代之后，click函数将一些html添加到表中，函数末尾的变量rowCount正确地增加一个单位。

现在全局变量应该增加一个单位我期望在单击函数中生成的新按钮时触发click函数，并且具有与第一个相同的ID，除了rowCount变量增加了一个单位。

有人能给我一个提示有什么不对吗？提前谢谢！

Answer 1

您可以尝试添加：

<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication5"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="MouseOverHighlightStyle" TargetType="Rectangle">
            <Setter Property="Fill" Value="Red" />
            <Setter Property="Opacity" Value="0" />
            <Setter Property="Grid.Column" Value="0" />
            <Setter Property="Grid.ColumnSpan" Value="{Binding Path=ColumnDefinitions.Count,
                RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Opacity)"
                                                    To="0.3" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Rectangle.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Opacity)"
                                                    To="0" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Rectangle Grid.Row="0" Style="{StaticResource MouseOverHighlightStyle}" />
        <StackPanel Grid.Row="0" Orientation="Horizontal">
            <ComboBox Height="30" Width="100" Margin="10,0,10,0" />
            <ComboBox Height="30" Width="100" Margin="0,0,10,0" />
            <ComboBox Height="30" Width="100" />
        </StackPanel>

        <Rectangle Grid.Row="1" Style="{StaticResource MouseOverHighlightStyle}" />
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <ComboBox Height="30" Width="100" Margin="10,0,10,0" IsHitTestVisible="False" />
            <ComboBox Height="30" Width="100" Margin="0,0,10,0" IsHitTestVisible="False" />
            <ComboBox Height="30" Width="100" IsHitTestVisible="False" />
        </StackPanel>
    </Grid>
</Window>

然后创建一个函数：

onClick(myFunction(this));

对我来说非常好。

如何构建一个依赖于函数[jQuery]中生成的变量的动态ID单击函数？

1 个答案: